Easy Responsive Modal Popup jQuery Plugin - TopModal

File Size: 6.09 KB
Views Total: 2274
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy Responsive Modal Popup jQuery Plugin - TopModal

The TopModal jQuery plugin lets you create responsive, easy-to-customize and easy-to-improve modal windows for your web applications.

How to use it:

1.Add jQuery library together with the jQuery TopModal plugin's JS & CSS files into the webpage.

<link rel="stylesheet" href="topmodal.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="topmodal.js"></script>

2. Wrap your modal content into a DIV container with the CSS class of 'topmodal'.

<div class="topmodal js-topmodal">
  ... Modal Content ...
</div>

3. By default, the modal window will be closed by clicking on the blank area of the background overlay. You can also add a close button inside the modal window like this:

<div class="topmodal js-topmodal">
  ... Modal Content ...
  <button class="js-topmodal-btn-close">Close</button>
</div>

4. Add the CSS class 'js-topmodal-btn' to the modal toggle button:

<button class="js-topmodal-btn">Popup</button>

5. Initialize the TopModal and done.

$('.js-topmodal').topmodal();

6. Default plugin settings.

$('.js-topmodal').topmodal({

  // CSS selector for modal window
  popup: '.js-topmodal',

  // CSS selector for toggle button
  popupBtn: '.js-topmodal-btn',

  // CSS selector for close button
  popupBtnClose: '.js-topmodal-btn-close',

  // CSS selector for background overlay
  popupOverlay: '.js-topmodal-overlay'
  
});

Change log:

2016-09-17

  • cleanup

2016-09-16

  • add Handler Methods

2016-09-15

  • replace popup to modal

2016-09-12

  • JS and styles update

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