jQuery Implementation of BlockUI Popup with Overlay Effect [With Demo Source Code Download]

This article demonstrates how to implement a blockUI popup layer with masking effect using jQuery. Share it with everyone for reference, as follows:

Firstly, let's put the code here:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <title>blockUI (Popup Layer)</title>
   <style type="text/css">
   #demo {
     width:100px;
     height:24px;
     text-align:center;
   }
   #displayBox{
     display:none;
   }
   </style>
 </head>
 <body>
   <button id="demo">Click to popup</button>
   <div id="displayBox">
     Here is the content displayed in the popup layer!!!<br /><br /><br /><a href="javascript:void(0);" onclick="$.unblockUI();return false;" title="[#1#]">Click to close</a>
   </div>
 </body>
 </html>
 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="jquery.blockUI.js"></script>
 <script type="text/javascript">
 $(function(){
   $('#demo').click(function(){
     $.blockUI({
       message: $('#displayBox'),
       css: {
         width: '500px',
         height: '100px',
         backgroundColor: '#eee',
         border: '1px solid red',
         color: 'green',
         textAlign: 'center',
         cursor: 'default'
       }
     });
   });
 )
 </script>

The running effect diagram is as follows:

Parameter description is as follows:

message = Content to be displayed

css = Style of the pop-up content, where the properties need to be written in the form of js, such as background-color => backgroundColor

$.unblockUI() = Close the overlay

Click here for the complete example codeDownload this site.

Here is the official website address: http://www.malsup.com/jquery/block/

Readers who are interested in more content related to jQuery can check the special topic of this site: 'Summary of jQuery Window Operation Skills', 'Summary of jQuery Drag and Drop Effects and Techniques', 'Summary of jQuery Common Plugins and Usage', 'Summary of Ajax Usage in jQuery', 'Summary of jQuery Table (table) Operation Skills', 'Summary of jQuery Extension Skills', 'Summary of jQuery Common Classic Effects', 'Summary of jQuery Animation and Effect Usage', and 'Summary of jQuery Selector Usage'.

I hope the description in this article will be helpful to everyone's jQuery programming.

Statement: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by internet users spontaneously, this website does not own the ownership, does not make artificial editing, nor assume relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)

Basic Tutorial