Easy Static Modal Popup Plugin For jQuery - eZmodal

eZmodal is a simple and fast jQuery plugin which enables you to display static html content in a responsive, fully configurable modal popup window.

How to use it:

1. Put the ezmodal.css stylesheet in the head section of the html page.

<link rel="stylesheet" href="src/ezmodal.css">

2. The eZmodal plugin requires jQuery library loaded in the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/ezmodal.js"></script>

3. Insert your html content into the modal window following the markup structure like this:

<div id="demo" class="ezmodal">
  <div class="ezmodal-container">
      <div class="ezmodal-header">
          <div class="ezmodal-close" data-dismiss="ezmodal">x</div>
          Modal Header
      </div>
      <div class="ezmodal-content">
          <p>Modal Content</p>
      </div>
      <div class="ezmodal-footer">
          <button type="button" class="btn" data-dismiss="ezmodal">Close</button>
      </div>
  </div>
</div>

4. The JavaScript to open the modal on page load.

$('#demo').ezmodal({
  'autoOpen': true
});

5. You can also adds a toggle button to launch the modal on demand.

<button type="button" ezmodal-target="#demo">Open</button>

6. Available options and defaults.

// the width of the modal window
// px, 'small', 'medium', 'full'
'width': 500,

// is it closable?
'closable': true,

// auto open on page load
'autoOpen': false,

// callbacks
'onShow': function () {},
'onClose': function () {}

Change log:

2015-07-23

• Vertical position
• update example

2015-07-22

• Block scroll body

2015-07-15

• Fixed closable option

---

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