JQueryDIV pop-up result implementation code _ jquery

This pop-up dialog box or information display box is now popular on many websites, and they want to add this pop-up element to their projects. JQuery can be used to achieve this effect without great efforts. Record it to my Blog and share it with friends in the industry. First, click the Close button or click anywhere on the mask layer to Close the pop-up layer.

HTML code

The Code is as follows:

Title location

Body content

The code is concise. The outermost layer is a large DIV as the container of the pop-up layer, H4 as the title of the pop-up layer, a DIV is used to display the content of the pop-up layer body, and a Div is used to place some buttons.
CSS code

The Code is as follows:

. Pop-box {
Z-index: 9999;/* This value must be large enough to display on the top */
Margin-bottom: 3px;
Display: none;
Position: absolute;
Background: # FFF;
Border: solid 1px # 6e8bde;
}

. Pop-box h4 {
Color: # FFF;
Cursor: default;
Height: 18px;
Font-size: 14px;
Font-weight: bold;
Text-align: left;
Padding-left: 8px;
Padding-top: 4px;
Padding-bottom: 2px;
Background: url ("../images/header_bg.gif") repeat-x 0;
}

. Pop-box-body {
Clear: both;
Margin: 4px;
Padding: 2px;
}

JS Code

The Code is as follows:

Function popupDiv (p_id ){
Var p_obj = $ ("#" + p_id );
Var export wwidth = document.doc umentElement. clientWidth;
Var transport wheight = document.doc umentElement. clientHeight;
Var popupHeight = p_obj.height ();
Var popupWidth = p_obj.width ();
// Add and display the Mask Layer
$ ("

"). AddClass (" mask ")
. Width (wxwwidth * 0.99)
. Height (optional wheight * 0.99)
. Click (function () {hideDiv (p_id );})
. AppendTo ("body ")
. FadeIn (200 );
P_obj.css ({"position": "absolute "})
. Animate ({left: Drawing wwidth/2-popupWidth/2,
Top: Running wheight/2-popupHeight/2, opacity: "show"}, "slow ");
}

Function hideDiv (p_id ){
$ ("# Mask"). remove ();
$ ("#" + P_id). animate ({left: 0, top: 0, opacity: "hide"}, "slow ");
}