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.

See Pricing
ModalBox - Responsive jQuery Popup Plugin

Examples

Iframe, HTML, Ajax, Maps

Photos With Title

Photo Gallery

You can use mousewheel or left|right arrow keys.

Special Use

Use Modalbox to show alert, confirm and prompts on you page.

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="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
        });

        $("#metacafe").modalbox({
            Type: 'iframe',
            Width: 560,
            Height: 315,
            ShowClose: false,
            OnClose: function () { alert('Modal box closed.'); },
            OnShow: function () { alert('Modal box displayed.'); }
        });

        $(".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>
        <!-- Metacafe video url,   -->
        <li><a href="http://www.metacafe.com/fplayer/10020578/pause_play_wreck_it_ralph_freddy_krueger.swf"
            id="metacafe">MetaCafe Iframe</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

Option Default Description
Type 'image'
'image' | 'iframe' | 'inline' | 'ajax'
Width 600

Set width of modal content. Note: if type is set to 'image' this option might be overridden with images actual width.

Width : 600 or Width : "80%"
Height 350

Set height of modal content. Option is used only for type iframe, inline and ajax.

Height : 500 or Height : "80%"
CloseHandle null

Expects a jquery object like $("#closebutton"). Use this option to set custom close button. Option should be used when type is set to 'inline'.
CloseHandle : $("#closebutton")

OnInit null

Expects a function. Function will be called at the time of initialization of modal box for any element(s).

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

OnShow null

Expects a function. Function will be called when modal box is shown.

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

OnClose null

Expects a function. Function will be called when modal box is closed.

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

for Alert

Option Default Description
Message Empty Any text
OkText '<u>O</u>K' Text
OnInit null

Expects a function. Function will be called at the time of initialization of modal box.

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

Expects a function. Function will be called when modal box is shown.

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

Expects a function. Function will be called when modal box is closed.

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

for Confirm

Option Default Description
Message Empty Any text
YesText '<u>Y</u>es' Text
NoText '<u>N</u>o' Text
CancelText '<u>C</u>ancel' Text
Action function (val) { } function
OnInit null

Expects a function. Function will be called at the time of initialization of modal box.

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

Expects a function. Function will be called when modal box is shown.

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

Expects a function. Function will be called when modal box is closed.

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

for Prompt

Option Default Description
Message Empty Any text
OkText '<u>O</u>k' Text
Action function (val) { } function
OnInit null

Expects a function. Function will be called at the time of initialization of modal box.

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

Expects a function. Function will be called when modal box is shown.

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

Expects a function. Function will be called when modal box is closed.

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

Support

For any kind of support for this script please write an email to me rajk...@rudrasofttech.com.

Please be elaborate in explaining your question.

Check Articles for more examples and help

Click2Sell is an authorized reseller of ModalBox.

Chat With Us Close
Leave Message