JQueryDIV pop-up result implementation code _ jquery

Source: Internet
Author: User
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 ");
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.