Jquery dialog2 (the background of the jquery pop-up layer is dimmed)

Source: Internet
Author: User
Document directory
  • Parameters:
  • Related downloads:
  • Application:
  • Demo:

It is often seen that the background of the pop-up layer is dimmed, so I wrote a jquery-based pop-up layer class, which is simpler than thickbox and less powerful.

I am used to writing the structure and style first, and then writing the JS interaction effect. The structure defines two layers. One is a translucent background layer, and the other is the primary structure of the pop-up layer, which is set to floating position: absolute; the background layer easily masks all body content. In the left-right center of the main layer, set left to be equal to the window width, divide two by the layer width, and then center. As for the window center up and down, I did not do it. Fixed the top is equal to the scrolltop hidden by the scroll bar plus 50px;

When an event triggers this class, first determine whether the two layers have been appended to the body. Otherwise, it will increase every time it is triggered. Five parameters are set: title, content, width, height, and cssname. They define the style names of the layer title, content in the layer, width, height, and content. The URL, text, ID, and IFRAME loading methods are configured for the content in the layer. The HTML content of the target URL is loaded using Ajax with get or post. The text content is directly written into the event, the ID is to obtain the HTML in an ID on the page and display it in the pop-up layer. IFRAME knows that the target URL is displayed in the framework in the layer. The content styles in the pop-up layer are also various, so a parameter cssname can be added to arrange the content in the layer.

Title

Disable content

The HTML of the pop-up layer is as follows:<Div id = "floatboxbg"> </div>
<Div id = "floatbox" class = "floatbox">
<Div class = "title"> <H4> title </H4> <span> close </span> </div>
<Div class = "content"> content </div>
</Div>
The default CSS style is as follows:#floatBoxBg{display:none;width:100%;height:100%;background:#000;position:absolute;top:0;left:0;}
.floatBox{border:#666 5px solid;width:300px;position:absolute;top:50px;left:40%;}
.floatBox .title{height:23px;padding:7px 10px 0;background:#333;color:#fff;}
.floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px;}
.floatBox .title span{float:right;cursor:pointer;}
.floatBox .content{padding:20px 15px;background:#fff;}

Parameters:
Sequence Parameters Function Remarks
1 Title Title of the pop-up layer Required, plain text
2 Content Content of the pop-up layer : URL Get or post the HTML of a page. The page must contain only the sub-tags of the body.
: Text Write content directly
: ID Show the sub-tag of an ID on the page
: IFRAME Content in the layer is displayed as a frame
3 Width Pop-up Layer Width Required, CSS value, such as "200px"
4 Height Height of the pop-up layer As shown above, but "Auto" is available"
5 Cssname CSS of the pop-up layer Name of the style added to ID floatbox. You can customize the style name in the layer.
Related downloads:

Download the latest jquery version
Download the Lee dialog plugin
Download the default CSS and modify it as needed.

Application:

Dialog (title, content, width, height, cssname );

Demo:
  1. Post submission form return information$ ("# Form1"). Submit (function (){
    VaR STR = escape ($ ("# Str"). Val ());
    Dialog ("My title", "url: Post? Test. asp? STR = "+ STR +" "," 200px "," Auto "," from ");
    Return false;
    });

    Get A. html file (or. php/. asp? Id = 4)Dialog ("My title", "url: Get? Test.html "," 200px "," Auto "," text ");Try

  2. The plain text content is displayed.Dialog ("My title", "text: My content", "200px", "Auto", "text ");Try
  3. The HTML in an ID is displayed.<Div id = "testid" style = "display: none;"> <H2> Lee dialog </H2> </div>
    Dialog ("My title", "ID: testid", "300px", "Auto", "ID ");TryLee Dialog
  4. Load a page as shown in the frameLoad blueidea and define CSS: body. IFRAME. Content {padding: 0;} to overwrite it, Because. Content defaults to padding: 20px;
    Dialog ("blueidea", "iframe: http://www.blueidea.com", "500px", "500px", "iframe ");Try

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.