Creating A Simple Animated Modal with jQuery and jQuery UI - ModalWindow

ModalWindow helps you create a simple jQuery modal window with amazing jQuery UI based open/close effects. No need for any extra CSS or javascript.

How to use it:

1. Include the latest jQuery and jQuery UI libraries in your Html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

2. Create a link to open a modal window.

<a id="opener" href="#" >Click me</a>

3. Create the content for your modal window.

<div id="dialog" title=" Modal Window Title ">

Your content goes here

</div>

4. The javascript to custom your modal window's appearance and animations.

<script type="text/javascript">
$(document).ready(function(){

$(function() {
 
$( "#dialog" ).dialog({
 autoOpen: false,
 resizable: true,
 width: 500 ,
 height: 400,
 position:['middle',80],
 
 show: {
 effect: "blind",
 duration: 1000
 },
 hide: {
 effect: "explode",
 duration: 1000
 },

});
$( "#opener" ).click(function() {
 
$( "#dialog" ).dialog( "open" );
   
});
});

});
</script>

---

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