PgwModal - Responsive modal

PgwModal - Responsive modal / dialog window for jQuery / Zepto

• Less than 2.5 KB (minified and gzipped)
• Fully responsive modal (desktop and mobile devices)
• AngularJS native implementation (activated or not)
• Full customization with the CSS file included

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

1. INCLUDE CSS AND JS FILES

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="pgwmodal.js"></script>

2. HTML

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

3. JAVASCRIPT

$('.openModal').click(function() {
	$.pgwModal({
		content: 'Modal Example'
	});
});

4.  OPTIONS

LOAD THE MODAL CONTENT

To load a content into the modal, you have 3 possibilities :

content: 'Plain text'  |  '<span>HTML content</span>'

target: '#myContent'  |  '.myContent'

url: 'http://domain.com/test.html'  |  'test.php'

title: 'My modal'

maxWidth: 600

ajaxOptions: {
    headers : {
        X-My-Header : 'test'
    }
}

loading: 'Loading in progress...'  |  '<img src="images/loading.gif">'

loading: 'An error has occured'  |  '<img src="images/error.png">'

angular: true

modalData: {
    myVar : 'test'
}

5. METHODS

Global - To create a modal, this function requires an object.

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

$.pgwModal('close');

$.pgwModal('reposition');

$.pgwModal('getData');

$.pgwModal({ pushContent: 'string or <span>HTML content</span>' });

$.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' });
            }
        }
    }
});