Blockui can display a mask layer when you send an ajax request to prohibit users from performing operations on the page and display prompt information. It can also be used to display a login window or images.
The blockui plug-in mainly uses the blockUI and unblockUI methods to control the display or hiding of the pop-up layer. You can specify some parameters in the blockUI method to control the content, size, and position of the display of the pop-up layer. Common Parameters of the blockUI method include message, css, overlayCSS, and showOverlay.
Message: it is mainly used to set the content to be displayed. It can be directly set to a text segment, html code, or jquery to get the hidden div on the page.
Css: it is mainly used to set the style of the pop-up layer, including the position, size, and border of the pop-up layer.
OverlayCSS: used to set the style of the mask layer, including the background color and transparency.
ShowOverlay: Used to set whether to display the mask layer. To hide the mask layer, you can set it to false.
The following example shows how to import the jquery. min. js and jquery. blockui. js files on the page. The specific implementation code is as follows:
Copy codeThe Code is as follows: $ ("# btnSubmit"). click (function (){
$. BlockUI ({
Message: $ ("# loginForm "),
Css :{
Width: '300px ',
Height: '300px ',
Left: ($ (window). width ()-300)/2 + 'px ',
Top: ($ (window). height ()-300)/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 codeThe Code is as follows: <div id = "loginForm" style = "display: none">
<Table>
<Tr>
<Td> User name: </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 = "Logon"/> </td>
<Td> <input id = "btnCancel" type = "button" value = "cancel"/> </td>
</Tr>
</Table>
</Div>
