Blockui plug-in based on jquery displays pop-up layer_jquery

Blockui can display a mask layer to prohibit users from operating the page and display prompt information when you send an ajax request; it can also be used to display a login window or display pictures, etc.
The blockui plug-in mainly uses two methods, blockUI and unblockUI, 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, position, etc. of the pop-up layer. Commonly used parameters of the blockUI method are: message, css, overlayCSS, showOverlay.
Message: Mainly used to set the content to be displayed. It can be directly set to a piece of text, HTML code or use jquery to get the hidden div on the page.
css: Mainly used to set the style of the pop-up layer, including the position, size, border, etc. of the pop-up layer.
OverlayCSS: Mainly used to set the style of the mask layer, including background color, transparency, etc.
ShowOverlay: Mainly used to set whether to display the mask layer. If you want to hide the mask layer, you can set it to false.
Let’s take a look at the specific usage through some examples. Import the jquery.min.js and jquery.blockui.js files on the page. The specific implementation code is as follows:

Copy the code The 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: "

Logging in, please wait...

",
css: {
border: '1px solid black'
}
});
setTimeout(function () { $.unblockUI() }, 1000);
});
$("#btnCancel").click(function () {
$.unblockUI();
});

The corresponding html code is:

Copy code The code is as follows:

Username:
Password:	< input id="txtPwd" type="text" />