Fully Responsive & Customizable jQuery Modal Plugin - PgwModal

PgwModal is a simple clean jQuery plugin for creating responsive modal windows (dialog boxes) with full page overlay on your web page. The plugin is fully customizable via CSS & javascript and supports Ajax content loading. The plugin is licensed under the GNU GENERAL PUBLIC LICENSE V3.

Basic Usage:

1. Place the jQuery PawModal plugin's stylesheet in the head section of your web page.

<link href="pgwmodal.css" rel="stylesheet" type="text/css">

2. Place the jQuery library and jQuery PawModal plugin's Javascript at the bottom of the page so the page loads faster.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="pgwmodal.js"></script>

3. Create a link to trigger a simple modal window (Optional).

<a href="javascript:void(0)" class="demo">Open Modal</a>

4. Bind the click function on the link you just created and set the content for the modal window.

<script>
$('.demo').click(function() {
$.pgwModal({
content: 'My content'
});
});
</script>

5. Available options to customize the modal window.

<script>
$('.demo').click(function() {
$.pgwModal({
target: '#modalContent', // The selector (#div or .class) will be used for push its HTML content into the modal.
title: 'Modal Title', // This parameter must be a string, and is displayed on the top of the modal.
content: '', // The value will be pushed into the modal.
url: '', // This URL will be loaded by an AJAX request, and the result will be pushed into the modal.
close: true,
maxWidth: 500, // The MaxWidth parameter must be a number in pixels, and it defines the maximum width of the modal. 
ajaxOptions: { // This parameter must be an object. If you want add one or more options to the jQuery Ajax Request (e.g. a HTTP header), you can add your options and it will be merged with the plugin default options.
    headers : {
        X-My-Header : 'test'
    }
}
modalData: { // if you need to pass data into the modal, you can set an object via the modalData parameter, and you will be able to get this object via the function "$.pgwModal('getData')" in the modal.
    myVar : 'test'
}
loading: 'Loading in progress...', // The Loading parameter must be a string or a HTML content, it will be displayed during the loading of the Ajax Request.
error: 'An error has occured. Please try again in a few moments.' // This parameter must be a string or a HTML content, it will be displayed if the Ajax request returns an error.
});
});
</script>

6. Available methods.

// Close - To close a modal, you can create a new link or a JavaScript action with this function.
$.pgwModal('close');
// Reposition - In some cases, you might need to refocus your modal in the height, this function does it.
$.pgwModal('reposition');
// GetData - If you have saved an object modalData during the creation, you can get it with the following function.
$.pgwModal('getData');
// isOpen - If you want to check if the modal is opened, you can use this function. It will return a boolean (true / false).
$.pgwModal('isOpen');
PushContent - If the query result contains several elements, but only one must be sent to the modal, this function allows you to select and send only the right item.
$.pgwModal({ pushContent: 'string or <span>HTML content</span>' });

Change log:

v1.5.0 (2014-08-22)

• update

v1.4.0 (2014-07-02)

• Fix for Zepto

v1.2.2 (2014-05-29)

• IE8 bug fix : Delete window object
• YUI compressor bug fix : Angular compilation

---

This awesome jQuery plugin is developed by Pagawa. For more Advanced Usages, please check the demo page or visit the official website.