Press "Enter" to skip to content

Simple Sliding Modal Window Plugin | jQuery.modal

cosyModal is a simple, unobtrusive jQuery plugin for creating nice, clean CSS style windows with configurable display/hide animations.

modal popup in html, how to create popup in html with css, jquery modal popup example, automatic pop up window html, javascript modal popup, css modal popup

2kb Window Modal Component In jQuery | simpleModal

How to make use of it:

1. Load the cosyModal.js script after the 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 the default modal styles.

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

3. Include your conditional content in a container with a unique CSS ID as below.

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

4. Initialize the modal window.

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

5. Run the modal window using the cosyModal (“Show”) method.

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

6. The options are available.

$('#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

});

Simple Sliding Modal Window Plugin, jQuery.modal Github, html popup window onclick


See Demo And Download

Official Website(xicrow): Click Here

This superior jQuery/javascript plugin is developed by xicrow. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *