Minimal Modal Popup Plugin with jQuery - modal.js
File Size: | 7.01 KB |
---|---|
Views Total: | 10401 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

modal.js is a minimal jQuery plugin to show a highly customizable modal popup that is always centered in your screen.
Features:
- Draggable modal popups without jQuery UI.
- Auto open & auto close.
- Supports Ajax content.
- Fullscreen overlay.
- Can be placed anywhere on your web page.
- Custom popup animations.
Basic usage:
1. Download the plugin and include the modal.css
and jquery.modal.js
on your web page.
<link rel="stylesheet" href="modal.css"> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="jquery.modal.js"></script>
2. Create a link to toggle a basic modal.
<a href="#" class="modal">Open Modal</a>
3. Create a link to toggle a modal containing an external link.
<a href="test.html" class="modal-ajax">Open Modal</a>
4. Call the plugin on the toggle links.
// Basic modal $('.modal').modal({message:'Your message'}); // Ajax modal $('.modal-ajax').modal();
5. Available options to customize your modal popups.
width:400, height:300, showSpeed: 500, closeSpeed: 500, position:{}, // e.g. {top:"200px",right:"10px"}. autoClose:0, buttons:{}, message:'', overlay:true, shadow:true, autoOpen: false, title:true, draggable:false, action:'fade', skin:'' // skin class name
This awesome jQuery plugin is developed by steven-ye. For more Advanced Usages, please check the demo page or visit the official website.