Responsive & Auto-Centering Modal Window Plugin with jQuery - egrModal

File Size: 11 KB
Views Total: 7809
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive & Auto-Centering Modal Window Plugin with jQuery - egrModal

egrModal is a pretty simple jQuery plugin for creating a responsive modal window that will be auto centered as you resize the browser window. To close the modal you can either click the close button, click anywhere on the overlay (outside of the modal window), or hit the ESC key on your keyboard.

How to use it:

1. Load the egrModal.css in the head section and the jquery.egrModal.js at the bottom of the web page.

<link rel="stylesheet" href="css/egrModal.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/plugins/jquery.egrModal.js"></script>

2. Create a link with class of 'modal-open' to open a modal window.

<a class="modal-open" href="#">Click here to show the Modal</a>

3. Create the content for the modal window.

<div class="modal">

Modal content goes here

</div>

4. Initialize the plugin and done.

(function($){

$('.modal').egrModal();

}(jQuery));

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