This script goes into head section
<!-- Include jQuery Library -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
<!-- Include Modal Box CSS file -->
<link href="modal.css" rel="Stylesheet" />
<link href="modal-darktheme.css" rel="Stylesheet" />
<!-- Include Modal Box Script File -->
<script src="modal.js" type="text/javascript"></script>
<!-- Script to initialize Modal Box -->
<script type="text/javascript">
$(document).ready(function () {
$(".photo").modalbox({
Type: 'image'
});
$(".gallery").modalbox({
Type: 'image'
});
$("#youtube").modalbox({
Type: 'iframe',
Width: 560,
Height: 315,
Modal: true
});
$(".iframe").modalbox({
Type: 'iframe',
Width: 600,
Height: 400
});
$("#inline").modalbox({
Type: 'inline',
Width: 400,
Height: 300
});
$("#ajax").modalbox({
Type: 'ajax',
Width: 600,
Height: 400
});
});
</script>
HTML Example
<!-- Body Section HTML -->
<!-- Individual Photo Modal Box -->
<a href="pic6.jpg" class="photo" title="This is sample title for this photo.">
<img class="thumb img-polaroid" src="pic6.jpg"
alt="" />
</a>
<a href="pic7.jpg" class="photo" title="This is sample title for this photo.">
<img class="thumb img-polaroid" src="pic7.jpg"
alt="" />
</a>
<!-- Photo Gallery Modal Box -->
<a href="pic1.jpg" class="gallery" rel="group1"
title="Sample title for gallery photo 1.">
<img class="thumb img-polaroid" src="pic1.jpg"
alt="" />
</a><a href="pic2.jpg" class="gallery"
title="Sample title for gallery photo 2." rel="group1">
<img class="thumb img-polaroid" src="pic2.jpg"
alt="" />
</a><a href="pic3.jpg" class="gallery"
title="Sample title for gallery photo 3." rel="group1">
<img class="thumb img-polaroid" src="pic3.jpg"
alt="" />
</a><a href="pic4.jpg" class="gallery"
title="Sample title for gallery photo 4." rel="group1">
<img class="thumb img-polaroid" src="pic4.jpg"
alt="" />
</a><a href="pic5.jpg" class="gallery"
title="Sample title for gallery photo 5." rel="group1">
<img class="thumb img-polaroid" src="pic5.jpg"
alt="" />
</a>
<ul>
<!-- Using a youtube embed url to show in modal box -->
<li><a href="http://www.youtube-nocookie.com/embed/F983K9pFk9s?rel=0" id="youtube">Youtube</a></li>
<!-- Google Map Url -->
<li>Google maps
<ul>
<li><a class="iframe" href="//maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Taj+Mahal,+Agra,+Uttar+Pradesh,+India&aq=0&oq=Taj+&sll=24.831845,79.919855&sspn=0.092695,0.154324&t=h&g=Khajuraho,+Madhya+Pradesh,+India&ie=UTF8&hq=Taj+Mahal,+Agra,+Uttar+Pradesh,+India&ll=27.172988,78.042139&spn=0.006295,0.006295&output=embed">
Search results</a></li>
<li><a class="iframe" href="//maps.google.com/?t=h&ie=UTF8&ll=48.85796,2.295231&spn=0.0042,0.009645&z=17&output=embed">
Direct link</a></li>
<li><a class="iframe" href="//maps.google.com/?t=m&layer=c&cbll=48.859507,2.292568&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56&ie=UTF8&ll=48.859358,2.292787&spn=0.00105,0.002411&z=19&source=embed&output=svembed">
Street view</a></li>
</ul>
</li>
<!-- inline example -->
<li><a href="#modal1" id="inline">Inline</a></li>
<!-- ajax example -->
<li><a href="js-tools/modal/sample.txt" id="ajax">Ajax</a></li>
</ul>
<div id="moda1" style="display: none;">
This is inline content that will be show inside the Modal Box. Modal box makes it
easy to implement this behavior. You can show any html inside modal box including
images, paragraphs etc.
<img class="thumb" src="pic6.jpg" alt="" />
I have written this text just to take some more space.
</div>
Alert, Confirm and Prompt
<button onclick="$.fn.modalbox('alert', {Message : 'Hi, <br/> I am ModalBox, I can work everywhere and make your webpage beautiful'})" class="btn">Alert</button>
<button onclick="$.fn.modalbox('confirm', {Message : '<h4>You are interested in downloading this plugin. Please Confirm?</h4>', Action: function(val) { if(val){ $.fn.modalbox('alert', {Message : 'Thanks please check the Download option at the bottom menu.'}); } else { $.fn.modalbox('alert', {Message : 'Why So????'}); }} })" class="btn">Confirm</button>
<button onclick="$.fn.modalbox('prompt', {Message : 'What is you Name?', Action: function(val){ if(val != '') { $.fn.modalbox('alert', {Message : val }); } }})" class="btn">Prompt</button>
