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:
- 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
- The plain text content is displayed.Dialog ("My title", "text: My content", "200px", "Auto", "text ");Try
- 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
- 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