Simple Sliding Modal Window Plugin with jQuery - cosyModal

cosyModal is a simple, unobtrusive jQuery plugin for creating nice, clean and CSS styleable modal windows with configurable show/hide animations.

How to use it:

1. Load the jQuery cosyModal.js script after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.cosyModal.js"></script>

2. Load the required jquery.cosyModal.css for default modal styles. You can modify and override the CSS to create your own styles.

<link rel="stylesheet" href="jquery.cosyModal.css">

3. Embed your modal content into a container with an unique CSS ID as follow.

<div id="modal-demo">
  <h1>Modal Title</h1>
  <p>Modal content</p>
</div>

4. Initialize the modal window.

$('#modal-demo').cosyModal();

5. Trigger the modal window with cosyModal('show') method.

$('#modal-demo').cosyModal('show');

6. Available options.

$('#modal-demo').cosyModal({

// Fixed width for the modal window.
width : 600,

// Fixed height for the modal window.
height : 'auto',

// Time in milliseconds show animation will run.
showTime : 500,

// Time in milliseconds hide animation will run.
hideTime : 250

});

---

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