Lightweight jQuery Modal Plugin with Easing Support - moaModal

moaModal is a small and easy-to-use jQuery plugin used to display animated, responsive, customizable modal window on your webpage.

Features:

• Custom animation speed and animation start position.
• Custom modal position.
• Easing support based on jQuery easing plugin.
• Full page overlay.
• Press ESC key or click on the overlay to close the modal.
• Easy to stylize in your own CSS.

How to use it:

1. Include jQuery library and the jQuery moaModal plugin in your web page.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/moaModal-minified.js"></script>

2. Include the jQuery easing plugin for more easing methods.

<script src="path/to/jquery.easing.min.js"></script>

3. Add a modal window to your web page.

<div class="modal" id="modal-demo">
  Modal content goes here
</div>

4. Style the modal windown and make it hidden on page load.

.modal {
  display: none;
  background: #E91E63;
  width: 50%;
  text-align: center;
  padding: 30px;
  color: #fff;
  border-radius:5px;
}

5. Create an html element to trigger the modal window.

<div class="modal-trigger">Modal Demo</div>

6. Launch the modal window.

$('.modal-trigger').modal({
  target : $('#modal-demo')
  // MORE OPTIONS HERE
});

7. Customize your modal window.

$('.modal-trigger').modal({

// animation speed
speed : 500,

// easing option
easing : 'linear',

// modal position
// CSS position properties or
// top|bottom|left|right|center|
position : '0 auto',

// animation start position.
// top|bottom|left|right|none
animation: 'none',

// trigger events
on : 'click',

// ECS key to close the modal
escapeClose : true,

// Overlay background color
overlayColor : '#000000',

// Overlay opacity level
overlayOpacity : 0.7,

// Click on the overlay to close the modal
overlayClose : true

});

8. Adding the class closeMe to any element within your modal will close the modal windown when clicked.

<button class="closeMe">Close Me</button>

---

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