Responsive And Fully Customizable Dialog Window Popup

SuperModal is a simple and lightweight jQuery component that allows you to create a beautiful, responsive, and fully customizable window dialog with back button support.

An easy-to-use jQuery modal plugin that helps developers create responsive and customizable dialogs and popups on the web app.

Features:

Modal in the modal.
Easy to configure via data attributes.
With the address bar or not.
Download the picture lazy.
Close the form using your browser’s back button.

How to make use of it:

1. Add the SuperModal jQuery library and Font Awesome Iconic Font to the web page.

<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" />
<link rel="stylesheet" href="/path/to/supermodal.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/supermodal.js"></script>

2. Initialize the plugin.

$(function ($) {
  $.supermodal();
});

3. Create a modal window on the web page. Note that the modal window should have a unique ID as follows:

<div id="modal-example" class="supermodal">
  ... Modal Content Here
  <button data-modal-close>Close</button>
</div><div id="modal-example" class="supermodal">
  ... Modal Content Here
  <button data-modal-close>Close</button>
</div>

4. Create trigger aspects to open the modal window.

<button data-modal="modal-example" 
        data-modal-title="Define Modal Title Here">
        Launch The Modal
</button>

5. Delay the loading of pictures/images till you open the modal.

<div id="modal-example" class="supermodal">
  ... Modal Content Here
  <img data-src="1.jpg" />
  <button data-modal-close>Close</button>
</div>

$.supermodal({
  lazyLoading: true
});

6. Enable the browser’s again button to close the modal.

$.supermodal({
  backButton: false
});

7. Customize the looks of the modal window.

$.supermodal({
  maxWidth: '1024px',
  maxHeight: '100%',
  background: '#fff',
  color: '',
  shadow: '0 0 60px 10px rgba(0, 0, 0, 0.3)',
  containerBackground: 'rgba(0,0,0,0.2)',
  containerClass: '',
  containerZIndex: '100',
  showTitle: true,
  title: '',
  titleColor: '#fff',
  titleBackground: '#212529',
  closeButton: true,
  closeButtonIcon: 'fa fa-times',
});

8. You also can move the above choices through data-modal-* attributes for instance the place you have got a number of modal home windows on your web page.

<button data-modal="modal-example" 
        data-modal-showTitle="false" 
        data-modal-maxWidth="400px" 
        data-modal-maxHeight="300px">
        Another modal
</button>