The development of the Web site must often use pop-up window form, today in the online search a small plug-in leanmodal, recorded here, convenient for their own, but also convenient for others to use.
This plugin is written by a foreigner, small size is its biggest advantage, compressed 1k less than. Of course, this plugin is parasitic on jquery.
I. Effect CHART
Two. Use steps:
1. Reference to Jquery.js and leanModal.min.js
Copy Code code as follows:
<script src= "Javascript/jquery-1.4.1.min.js" type= "Text/javascript" ></script>
<script src= "Javascript/jquery.leanmodal.min.js" type= "Text/javascript" ></script>
2. The page defines a style that is used for semitransparent background layers, and also needs to hide the pop-up layer settings as follows:
Copy Code code as follows:
#lean_overlay {position:fixed; z-index:100; top:0px; left:0px; height:100%; width:100%; background: #000; display: None }
#OpenWindow {Background:none Repeat scroll 0 0 #FFFFFF border-radius:5px 5px 5px 5px box-shadow:0 0 4px rgba (0, 0, 0 , 0.7); Display:none; padding-bottom:2px; width:404px; z-index:11000; left:50%; Margin-left: -202px; Opacity:1; position:fixed; top:200px; }
3. Loading methods, there are two ways
Method 1 is the method of attaching an element of an ID to a pop-up window
Method 2 is a way to attach all the rel= "Leanmodal" elements in a label to a pop-up window
There are 3 parameters that can be overloaded,
Top: The distance of pop-up window from the head, pixel as unit, do not add "px".
Overlay: Background Transparency, the maximum is 1, the greater the value, the greater the transparency, the initial value is 0.5
CloseButton: The Close button style for open windows
Copy Code code as follows:
$ (document). Ready (function () {
$ (' #aOpen '). Leanmodal ({top:100, CloseButton: ". Modal_close"});
$ (' a[rel*=leanmodal] '). Leanmodal ({top:100, CloseButton: ". Modal_close"});
});
Three. Demo download
Online Demo http://http://demo.jb51.net/js/2012/LeanModal/
Package Download http://www.jb51.net/jiaoben/42278.html
