Blockui can display a mask layer when you send an AJAX request to prevent the user from manipulating the page and displaying the message, or to display a landing window, or to display a picture.
Blockui Plug-ins mainly use Blockui and Unblockui two methods to control the display or hide the pop-up layer, you can specify some parameters in the Blockui method to control the pop-up layer display content, size, location, and so on. The commonly used parameters of the Blockui method are: Message,css,overlaycss,showoverlay.
Message: Mainly used to set the content to display, can be set directly to a paragraph of text, HTML code or use jquery to get the hidden div on the page.
CSS: Mainly used to set the pop-up layer style, including the pop-up layer position, size, border and so on.
OVERLAYCSS: Mainly used to set the mask layer style, including background color, transparency and so on.
Showoverlay: Used primarily to set whether the mask layer is to be displayed, or False if you want to hide the mask layer.
Here are some examples to see the specific use of the page to import Jquery.min.js and jquery.blockui.js files, the implementation of the code is as follows:
Copy Code code as follows:
$ ("#btnSubmit"). Click (function () {
$.blockui ({
Message: $ ("#loginForm"),
CSS: {
Width: ' 300px ',
Height: ' 300px ',
Left: ($ (window). Width ()-2 + + ' px ',
Top: ($ (window). Height ()-2 + + ' px ',
border: ' None '
}
});
});
$ ("#btnLogin"). Click (function () {
$.blockui ({
Message: "CSS: {
border: ' 1px solid black '
}
});
settimeout (function () {$.unblockui ()}, 1000);
});
$ ("#btnCancel"). Click (function () {
$.unblockui ();
});
The corresponding HTML code is:
Copy Code code as follows:
<div id= "LoginForm" style= "Display:none" >
<table>
< Tr>
<td> username:</td>
<td><input id= "txtUserName" type= "text"/></td>
</ Tr>
<tr>
<td> password:</td>
<td><input id= "txtpwd" type= "text"/></td>
</tr>
<tr>
<td><input id= "btnlogin" type= "button" value= "Login"/></td>
<td><input id= "btncancel" type= "button" value= "Cancel"/></td>
</tr>
</table> </div>
