I am creating a site from a template i purchased from TM for a beauty salon!
I want to create an online booking form with the validations of name number service type but i’m having trouble getting a link to open that will pop up also using jquery NOT html
how do i fix this… what is the code i have to insert so that when you click “BOOK NOW” a jquery pop up appears in the centre of the page and it has a booking form on it….
i have googled and googled but it is all new to me as in a NOOB at jquery….
here is a live demo of the template
(template link for demo http://osc4.template-help.com/wt_31562/index.html#)
and here is the code for where i am trying to place a pop up jquery
<dt class="dt3"><a href="#"></a><img src="images/shadow.png" alt="" class="shadow"></dt>
<dd id="page3">
<div class="inner">
<div class="content">
<section class="col-1">
<h2>our services</h2>
<p>Vintage Beauty</p>
<p class="dark">We offer Free Consultation for Botox, Fillers, Medical Skin Peels, Cosmetic Surgery
<br> & also specialise n body and skin care.
</p>
<img src="images/page2-img1.png" alt="" class="p2"> <a href="#" class="more">view more</a> </section>
<section class="col-2">
<h2>services</h2>
<ul class="list p2">
<li><a href="#">Fish Pedicures</a></li>
<li><a href="#">Manicures</a></li>
<li><a href="#">Pedicures</a></li>
<li><a href="#">Waxing</a></li>
<li><a href="#">Threading</a></li>
<li><a href="#">Tanning</a></li>
<li><a href="#">Body Massage</a></li>
<li><a href="#">Nail/Eye Extensions</a></li>
<li><a href="#">Eye Lash/Brow Tinting</a></li>
<li><a href="#">Twinkle Toes</a></li>
<li><a href="#">Teeth Whitening Kits</a></li>
<li><a href="#">Hot Wax Specialists</a></li>
</ul>
**<a href="#" class="more">BOOK ONLINE NOW</a> </section>**
</div>
</div>
</dd>
I assume that whatever dialog popup plugin you are using supports iframe. Find the plugin’s website and check the documentation page to see if this is the case. If not, google: ‘jquery plugin lightbox’, you’ll find more than enough options.
Here’s the nitty gritty:
If you’re trying to display html in a dialog box, typically the best way to accomplish this is through using an iframe. Essentially, an iframe is just displaying a second html page within the first. So what you need to do is create a html page for the form you want displayed in the popup, and then simply link to that page using an iframe.
Viewing the w3school tutorial on iframes will help you really understand how this process works.
As far as implementing this, you’ll again have to refer to the lightbox plugin documentation for help, as we have no way of knowing how the script works.