How to Use the Jquery pop-up plug-in LeanModal

A pop-up window is often used to develop websites. Today, a small plug-in LeanModal is searched on the Internet, which is recorded here for your convenience and convenience.

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

I.

2. steps:

1. Reference Jquery. js and leanModal. min. js
Copy codeThe Code is 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. Define a style on the page. This style is used for the translucent background layer. In addition, you need to hide the pop-up layer settings. The Code is as follows:Copy codeThe 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. There are two loading methods:
Method 1 is to add the element of an ID to the pop-up window.
Method 2: You can add all rel = "leanModal" elements in the tag to the pop-up window.
Three parameters can be reloaded,
Top: the distance from the top of the pop-up window, in pixels. Do not add "px ".
Overlay: Specifies the transparency of the background. The maximum value is 1. The larger the value is, the deeper the transparency is. The initial value is 0.5.
CloseButton: The closing button style for opening a windowCopy codeThe Code is as follows: $ (document). ready (function (){
// $ ('# Aopen'). leanModal ({top: 100, closeButton: ". modal_close "});
$ ('A [rel * = leanModal] '). leanModal ({top: 100, closeButton: ". modal_close "});
});

Iii. Download Demo
Online Demo http: // http://demo.jb51.net/js/2012/LeanModal/
Package download http://www.jb51.net/jiaoben/42278.html