PgwJS
Powered by Pagawa.com

PgwModal - Responsive modal / dialog for jQuery / Zepto / AngularJS

Download

Current version: 2.0
To download or fork this project, please visit our GitHub repository
And of course, you will need Jquery or Zepto (and Angular if necessary) to use this responsive dialog / modal window plugin.
jquery zepto.js angular js

Example

To use our plugin, just load CSS and JS files:
<link href="pgwmodal.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="/pgwmodal.min.js"></script>

Modal example 1

Code:
$.pgwModal({
    content: 'Modal Example 1'
});
Result: Open Modal 1

Modal example 2

Code:
<div id="modalContent" style="display: none;">
    <strong style="color: #ff0000;">Modal Example 2</strong>
</div>
$.pgwModal({
    target: '#modalContent',
    title: 'Modal title 2',
    maxWidth: 800
});
Result: Open Modal 2

Modal example 3

Code:
$.pgwModal({
    url: 'modal-test.php',
    loadingContent: '<span style="text-align:center">Loading in progress</span>',
    closable: false,
    titleBar: false
});
Modal source:
<div style="text-align:center">
    <strong>Content loaded via AJAX.</strong>
    <br><br>
    In this example, the modal option "close" has been disabled.
    <br><br>
    To close the modal, you can use the PgwModal function "$.pgwModal('close');", to create a link (example below) or execute it in a JavaScript action.
    <br><br>
    <b><a href="javascript:void(0)" onclick="$.pgwModal('close');">Close Modal</a></b>
</div>
Result: Open Modal 3

Documentation

Modal content

To load a content into the modal, you have 3 possibilities :
"content" - The value will be pushed into the modal.
content: 'Plain text'  |  '<span>HTML content</span>'
OR
"target" - The selector (#div or .class) will be used for push its HTML content into the modal.
target: '#myContent'  |  '.myContent'
OR
"url" - This URL will be loaded by an AJAX request, and the result will be pushed into the modal.
url: 'http://domain.com/test.html'  |  'test.php'

Optional parameters

"title" - This parameter must be a string, and it is displayed on the top of the modal.
title : 'My modal'
"titleBar" - This option must be a boolean, and displays or not the title bar. (Defaults to true)
titleBar : false
"mainClassName" - This parameter must be a string, and overrides the default CSS class of the modal. (Defaults to "pgwModal")
mainClassName : 'customModal'
"backdropClassName" - This parameter must be a string, and overrides the default CSS class of the backdrop. (Defaults to "pgwModalBackdrop")
backdropClassName : 'customBackdrop'
"maxWidth" - The MaxWidth option must be a number in pixels, and it defines the maximum width of the modal. This modal is responsive, so if the browser width is inferior to this parameter, the modal width will be the browser width.
maxWidth : 600
"angular" - If this option is enabled and the modal content contains Angular code, it will be compiled to activate it.
angular : true
"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.
modalData : {
    myVar : 'test'
}
"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.
ajaxOptions: {
    headers : {
        X-My-Header : 'test'
    }
}
"closable" - This option must be a boolean, and disables or not all closing functionalities (link, escape key and click on background). (Defaults to true)
closable : false
"closeContent" - This parameter must be a string or HTML element, and replaces the default close link (a black cross). (Defaults to "<span class="pm-icon"></span>")
closeContent : 'Close'  |  '<img src="images/close.png">'
"closeOnEscape" - If this option is enabled, the modal will be closed when the escape key is pressed. (Enabled by default)
closeOnEscape : false
"closeOnBackgroundClick" - If this option is enabled, the modal will be closed when the user clicks on the backdrop of the modal. (Enabled by default)
closeOnBackgroundClick : false
"loadingContent" - The Loading parameter must be a string or HTML content, it will be displayed during the loading of the Ajax Request.
loadingContent : 'Loading in progress...'  |  '<img src="images/loading.gif">'
"errorContent" - This parameter must be a string or HTML content, it will be displayed if the Ajax request returns an error.
errorContent : 'An error has occured'  |  '<img src="images/error.png">'

Available functions

Global - To create a modal, this function requires an object.
$.pgwModal({
    content: 'Modal Example 1'
});
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>' });
An example to explain how to use this function:
$.pgwModal({
    url: 'modals.php?get=userData' // Returns the object "{status: 200, response: '<div class="user">John Doe</div>'}"
    ajaxOptions : {
        success : function(data) {
            if (data.response) {
                $.pgwModal({ pushContent: data.response });
            } else {
                $.pgwModal({ pushContent: 'An error has occured' });
            }
        }
    }
});

Modal / dialog events

PgwModal::Create - This event is launched after the modal creation.
$(document).bind('PgwModal::Create', function() {
    // Your code when the modal is created.
});
PgwModal::Open - This event is launched after opening.
$(document).bind('PgwModal::Open', function() {
    // Your code when the modal is opened.
});
PgwModal::PushContent - This event is launched after sending the content.
$(document).bind('PgwModal::PushContent', function() {
    // Your code when the content (Div reference, HTML code or Ajax result) is pushed into the modal.
});
PgwModal::Close - This event is launched after closure.
$(document).bind('PgwModal::Close', function() {
    // Your code when the modal is closed.
});
jquery / zepto responsive slider - jquery / zepto responsive menu - jquery / zepto responsive modal / dialog - jquery / zepto cookie plugin