Jquery.blockui is a number of jquery plug-in pop-up layer, it is small (original 16k, compressed after 10 or so), easy to use, full-featured, support IFRAME, support modal, can be customized high also means that his default modest appearance.
jquery's Blockui plugin allows you to simulate synchronization behavior while using AJAX, locking the browser (modal window). When activated, it prevents the user from moving the page (or part of the page) until it is disabled. Blockui adds the DOM of the element, giving it a look and blocking user interaction behavior.
1, first introduced plug-ins
<script src= "Jquery.min.js" type= "Text/javascript" ></script>
<script src= "Jquery.blockui.min.2.39.js" type= "Text/javascript" ></script>
2. Call
| The code is as follows | Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <script src= "Jquery.min.js" type= "Text/javascript" ></script> <script src= "Jquery.blockui.min.2.39.js" type= "Text/javascript" ></script> <script type= "Text/javascript" > $ (function () { $ (' #Button1 '). Click (function () { The activity of the user who blocked the page $.blockui (); }); $ (' #Button2 '). Click (function () { Customizing information content $.blockui ({message: ' }); $ (' #Button3 '). Click (function () { Custom Style $.blockui ({css: {backgroundcolor: ' #f00 ', color: ' #fff '}}); }); $ (' #Button4 '). Click (function () { Define the pop-up information as an element of the page $.blockui ({message: $ (' #domMessage ')}); }); $ (' #btnClose '). Click (function () { Close the pop-up layer $.unblockui (); }); $ (' #Button5 '). Click (function () { Set fade in, fade out, auto turn off time $.blockui ({fadein:700, fadeout:700, timeout:2000}); }); A simple bubble tip $.growlui (' Hint ', ' delete successful! '); }); </script> <body> <ol> <li> block the user's activity of the page, will not automatically disappear, please refresh: $.blockui (); <input id= "Button1" type= "button" value= "Test"/> </li> <li> Custom messages: <input id= "Button2" type= "button" value= "Test"/> </li> <li> Custom Style: <input id= "Button3" type= "button" value= "Test"/> </li> <li> pops the specified element and closes the pop-up layer (the layer can be hidden): <input id= "Button4" type= "button" value= "Test"/> </li> <li> set fade in, fade out, auto shutdown time: <input id= "Button5" type= "button" value= "Test"/> </li> </ol> <div id= "Dommessage" style= "text-align:center; width:200px; height:50px; Border 1px solid #9cf; padding:25px; Display:none; " > Message<input id= "btnclose" type= "button" value= "Off"/> </div> </body> |
|
3, Style modification
The default style provided by the JQuery Blockui is simplistic and can be modified every time the Blockui () function is invoked. Also modify the library file Jquery.blockUI.js, modify the $.blockui.defaults object-related code at once:
| The code is as follows | Copy Code |
| Display source Default definition message box style CSS style |
|
Summary: The above text personally think that the writing is bad, but the basic use of no problem, detailed support is the official website:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
