ModalBox

Responsive jQuery Popup Plugin

ModalBox is a powerfull jQuery plugin which can be used to highlight a photo, video, map, AJAX content or inline HTML content. ModalBox can also be used to show Alert, Confirm or Prompt boxes. Plugin works every where including PC, iPad, iPhone and Android.

• Examples
• Features
• How to Use
• Usage Options
• Download

Features

1. Responsive (Works on PC, iPad, iPhone and Android Phones)

2. Default options customizable

3. Customizable UI via CSS3

4. Photo Gallery(Mousewheel and Keyboard Navigation avialable)

5. Auto Adjust or Set Custom Height/Width

6. Show YouTube videos, Google Maps, SWF Files via Iframe

7. Handle non existing URL

8. Init, Show and Close callbacks

9. Show Ajax and Inline content

10. Very Lightweight

How To Use

This script goes into head section

<!-- Include jQuery Library -->
<script src="//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="//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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Taj+Mahal,+Agra,+Uttar+Pradesh,+India&amp;aq=0&amp;oq=Taj+&amp;sll=24.831845,79.919855&amp;sspn=0.092695,0.154324&amp;t=h&amp;g=Khajuraho,+Madhya+Pradesh,+India&amp;ie=UTF8&amp;hq=Taj+Mahal,+Agra,+Uttar+Pradesh,+India&amp;ll=27.172988,78.042139&amp;spn=0.006295,0.006295&amp;output=embed">
                    Search results</a></li>
                <li><a class="iframe" href="//maps.google.com/?t=h&amp;ie=UTF8&amp;ll=48.85796,2.295231&amp;spn=0.0042,0.009645&amp;z=17&amp;output=embed">
                    Direct link</a></li>
                <li><a class="iframe" href="//maps.google.com/?t=m&amp;layer=c&amp;cbll=48.859507,2.292568&amp;panoid=YJ0lq28OOy3VT2IqIuVY0g&amp;cbp=12,151.58,,0,-15.56&amp;ie=UTF8&amp;ll=48.859358,2.292787&amp;spn=0.00105,0.002411&amp;z=19&amp;source=embed&amp;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>

Usage Options

for Photos, Youtube Videos, Maps or Inline HTML

'image' | 'iframe' | 'inline' | 'ajax'

OnInit : function() { 
/* Do Work Here */ 
}

OnShow : function(index) { /* index: current item index if in gallery 
mode else it will be 0 */ 
/* Do Work Here */ }

OnClose : function() { 
/* Do Work Here */ 
}

for Alert

OnInit : function() { /* Do Work Here */ }

OnShow : function() { /* Do Work Here */ }

OnClose : function() { /* Do Work Here */ }

for Confirm

OnInit : function() { /* Do Work Here */ }

OnShow : function() { /* Do Work Here */ }

OnClose : function() { /* Do Work Here */ }

for Prompt

OnInit : function() { /* Do Work Here */ }

OnShow : function() { /* Do Work Here */ }

OnClose : function() { /* Do Work Here */ }

Check Articles for more examples and help

• How to use Modalbox to show youtube video in a popup
• How to use ASP.Net form with Modalbox jQuery Plugin
• How to change background color of Modalbox jQuery Popup
• How to change width and height of Modalbox jquery popup