Submit your widget

A light modal windows with jQuery plugin

Created 5 years ago   Views 16094   downloads 4284    Author thomasgrauer
A light modal windows with  jQuery plugin
View DemoDownload 74.3 KB
65
Share |

This is A light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window.

 

Include Script Files

Include current version of jQuery

<script type='text/javascript' src='js/jquery.modal.js'></script>

<script type='text/javascript' src='js/site.js'></script>

Place in body

<a class="modalLink" href="#">Click Me

<div class="overlay"></div>

<div class="modal">

<a href="#" class="closeBtn">Close Me</a>

<!-- content here -->

</div>

CSS

.overlay{

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 1000;

display: none;

}

.modal{

display: none;

background:#eee;

padding:0 20px 20px;

overflow:auto;

z-index:1001;

position:absolute;

width: 500px;

min-height: 300px;

}

 

Tag: dialog

You might also like