Lightweight jQuery Modal Plugin with Easing Support - moaModal
File Size: | 7.36 KB |
---|---|
Views Total: | 685 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.