Home Jquery Scripts Simple Sliding Modal Window Plugin | jQuery.modal

Simple Sliding Modal Window Plugin | jQuery.modal

Jquery Scripts webcodeflow · October 5, 2022 · 0 Comment

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