Light & Animated jQuery Modal Window Plugin - JUI Modals
File Size: | 9.63 KB |
---|---|
Views Total: | 1157 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery plugin to create responsive & animated modal windows with plain Html markup and a little CSS/CSS3 magic.
How to use it:
1. Load the required jui.modals.css
in the head section of your web page.
<link rel="stylesheet" href="css/jui.modals.css">
2. Create a link to open a modal window.
<a id="demo" href="#">Open A Default Modal</a>
3. Load the jQuery library and the jui.modals plugin at the bottom of the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.jui.modals.js"></script>
4. Initialize the plugin to create a basic modal window
$("#demo").juimodals({ modalTitle: 'Title', modalTextContent: 'Modal content', appearType: "default", modalType: "basic" });
5. Options to customize the modal window.
modalMainClass: ".jui-modal", modalTitle: 'Modal Heading', modalTextContent: 'This is some kind of content here', appearType: 'slideFromTop' // CSS3 animations modalOpened: false, modalType: "modal-default", // default, basic or slide modalSize: "normal-size" // normal-size or big-size
This awesome jQuery plugin is developed by antonradev. For more Advanced Usages, please check the demo page or visit the official website.