Modal box

Easy to integrate jQuery responsive Modal box / Popup window
The modal box is a window that pops up in front of other elements on your page. It can be used for advertisements, subscription form, uploading forms, login/register forms or for displaying a simple message to the visitor.
The plugin Modal Box is suitable for use in different web projects. With the existing options you can configure the modal box according to your specific needs with minimal effort.
There are a few options for opening the modal box - it can be triggered from another element, opened after given time or nth clicks. The width can be adjusted. By default the height of the modal box is determined by the height of the current page content. If the inner scroll option is enabled, the modal box takes the size of the screen minus the added offset.
The Modal Box is suitable for responsive web pages with the
responsive
object option. You can see an example below.
For the whole functionality of Modal box, see documentation.

How to use

1. Load jQuery and include Modal box plugin files
<link rel="stylesheet" type="text/css" href="dist/modal-box.min.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="dist/modal-box.min.js" type="text/javascript"></script>
2. Set up your HTML
<div id="my-modal">modal box - content</div>
<button type="button" id="open-modal">Open modal</button>
3. Call the plugin
<script type="text/javascript">
    $(document).ready(function() {
        $("#my-modal").wgModal({
            triggerElement: '#open-modal',
        });
    });
</script>

Browser Support

 
8+
 
6+
 
12+
 
5.0.5+
 
8+

Dependecies

Get the latest jQuery library. Minumum compatibile jQuery version is 1.7.0 version.

Examples

Header
Modal box/window with header

Set up HTML
<div id="my-modal">
    <div class="wg-header">Header</div>
    modal box - content
</div>
<button type="button" id="open-modal">Open modal</button>
Call the plugin
<script type="text/javascript">
    $(document).ready(function() {
        $("#my-modal").wgModal({
            triggerElement: '#open-modal',
        });
    });
</script>
View demo - Header
Theme
Modal box/window with header

Set up HTML
<div id="my-modal">
    <div class="wg-header">Header</div>
    modal box - content
</div>
<button type="button" id="open-modal">Open modal</button>
Call the plugin
<script type="text/javascript">
    $(document).ready(function() {
        $("#my-modal").wgModal({
            triggerElement: '#open-modal',
            theme:"info"
        });
    });
</script>
View demo - Theme
Open delay
Set 5 seconds delay after which the modal box will open.
<script type="text/javascript"> 
    $(document).ready(function() { 
        $("#my-modal").wgModal({
            openDelay:5000,
        }); 
    }); 
</script>
View demo - Open delay
Open when scrolled from top
Activate the modal box after the user scrolls to a predefined position in pixels from top of the page.
<script type="text/javascript"> 
    $(document).ready(function() { 
        $("#my-modal").wgModal({
            openScrolled: 200,
        }); 
    }); 
</script>
View demo - Open when scrolled from top
Custom width

Set width for the modal box.

<script type="text/javascript">
    $(document).ready(function() { 
        $("#my-modal").wgModal({
            triggerElement: '#open-modal',
            width: '50%',
        }); 
    }); 
</script>
View demo - Custom width
Vertical centering

Choose if you want the modal box to be vertically centered in the page.

<script type="text/javascript">
    $(document).ready(function() { 
        $("#my-modal").wgModal({
            triggerElement: '#open-modal',
            verticalCentering: true
        }); 
    }); 
</script>
View demo - Vertical centering
Inner scroll

Enable inner scroll.

<script type="text/javascript">
    $(document).ready(function() { 
        $("#my-modal").wgModal({
            triggerElement: '#open-modal',
            innerScroll: true
        }); 
    }); 
</script>
View demo - Inner scroll
Ajax
Load content via AJAX.
<script type="text/javascript">
    $(document).ready(function() { 
        $("#my-modal").wgModal({
            triggerElement: '#open-modal',
            remote: 'ajax/test.html'
        }); 
    }); 
</script>
View demo - Ajax
Responsive capability
In this object you can set breakpoints for different viewport widths (from the breakpoint up) at which you can redefine different option values and use events.
<script type="text/javascript">
    $(document).ready(function () {
        var modal = $("#my-modal").wgModal({
            triggerElement: '#open-modal',
            width: '90%',
            onBeforeOpen    : function(e) {
                console.log( 'modal will Open!');
            },
            responsive:{
                // breakpoint from 0 up
                 0: {
                     width:'90%',
                     onBeforeOpen    : function(e) {
                         console.log( 'modal box will Open on mobile device!');
                     },
                 },
                 // breakpoint from 540 up
                 540: {
                     width:'70%'
                },
                // breakpoint from 768 up
                768: {
                    width:'50%'
                }
            }
        });
    });
</script>
View demo - Responsive capability
Events
You can use custom functionalities on Modal box events.
Parameter e = current plugin object.
<script type="text/javascript">
    $(document).ready(function () {
        var modal = $("#my-modal").wgModal({
            triggerElement: '#open-modal',
            onInitialize: function (e) {
                console.log('onInitialize');
            },
            onBeforeOpen    : function(e) {
                console.log( 'modal will Open!');
            },
            onAfterOpen    : function(e) {
                console.log( 'modal Opened!');
            },
            onBeforeClose    : function(e) {
                console.log( 'modal will close!');
            },
            onAfterClose: function (e) {
                console.log('modal  Closed!');
            },
        });
    });
</script>
View demo - Events
Public Methods
Invoke openModal() and closeModal() methods on chosen event.
<script type="text/javascript">
    $(document).ready(function () {
        var modal = $("#my-modal").wgModal();

        $('#open-modal').click(function (){
            modal.openModal();
        });
        $('#my-modal .close-modal').click(function (){
            modal.closeModal();
        });
    });
</script>
View demo - Public Methods
Github Download Documentation