Light & Animated jQuery Modal Window Plugin - JUI Modals

File Size: 9.63 KB
Views Total: 1151
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Light & Animated jQuery Modal Window Plugin - JUI Modals

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.