How to use Jquery pop-up window plug-in LeanModal

How to use Jquery pop-up window plug-in LeanModal_jquery

WBOY

Release： 2016-05-16 17:55:28

Original

1328 people have browsed it

It is indispensable to develop a website in the form of pop-up windows. Today I searched for a small plug-in called LeanModal on the Internet and recorded it here for my own convenience and the convenience of others.

This plug-in is written by a foreigner. Its biggest advantage is its small size, which is less than 1k after compression. Of course, this plug-in is parasitic on JQuery.

1. Rendering

2. Usage steps:

　1. Reference Jquery.js and leanModal.min.js
How to use Jquery pop-up window plug-in LeanModal_jquery

Copy code The code is as follows:

2. The page defines a style. This style is used for the semi-transparent background layer. In addition, the pop-up layer needs to be hidden. The code is as follows:

Copy code The code is 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 method, there are two ways
Method 1 is to attach an element with an ID to the pop-up window Method
Method 2 is a method that can attach all elements with rel="leanModal" in the A tag to a pop-up window
There are 3 parameters that can be overloaded,
top: the distance of the pop-up window from the top, in pixels as the unit, do not add "px".
Overlay: The transparency of the background, the maximum is 1. The larger the value, the deeper the transparency. The initial value is 0.5
CloseButton: The close button style of the open window

Copy code The code is as follows:

 
$(document).ready(function () { 
　　　　　 //$('#aOpen').leanModal ({ top: 100, closeButton: ".modal_close" }); 
$('a[rel*=leanModal]').leanModal({ top: 100, closeButton: ".modal_close" }); 
 }); 

3. Demo download
Online demohttp://http://demo.jb51.net/js/2012/LeanModal/
Package downloadhttp://www.jb51.net/jiaoben/42278.html