Jquery pop-up login window implementation code

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 used to display the html in an id in the page to 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.

1. the html of the pop-up layer is as follows:
Copy codeThe Code is as follows:
<Div id = "floatBoxBg">
<Div id = "floatBox" class = "floatBox">
<Div class = "title"> <Div class = "content"> content </div>
</Div>
</Div>

The corresponding style is as follows:
Copy codeThe Code is as follows:
# FloatBoxBg {
Display: none;
Width: 100%;
Height: 100%;
Background: #000;
Position: absolute;
Top: 0;
Left: 0;
}
. FloatBox {
Border: # 0C7FDA 5px solid;
Width: 300px;
Position: absolute;
Top: 50px;
Left: 40%;
Z-index: 1000;
}
. FloatBox. title {
Height: 23px;
Padding: 7px 10px 0;
Color: # fff;
Background-attachment: scroll;
Background-image: url (../images/dialog_bg.gif );
Background-repeat: repeat-x;
Background-position: 0px 0px;
}
. FloatBox. title h4 {
Float: left;
Padding: 0;
Margin: 0;
Font-size: 14px;
Line-height: 16px;
}
. FloatBox. title span {
Float: right;
Cursor: pointer;
Vertical-align: middle;
Margin-bottom: 2px;
}
. FloatBox. content {
Padding: 20px 15px;
Background: # fff;
}

2. The js file in the pop-up window is as follows:
Copy codeThe Code is as follows:
// JavaScript Document

Var dialogFirst = true;
Function dialog (title, content, width, height, cssName ){

If (dialogFirst = true ){
Var temp_float = new String;
Temp_float = "<div id = \" floatBoxBg \ "style = \" height: "+ $ (document ). height () + "px; filter: alpha (opacity = 0); opacity: 0; \"> </div> ";
Temp_float + = "<div id = \" floatBox \ "class = \" floatBox \ "> ";
Temp_float + = "<div class = \" title \ "> Temp_float + = "<div class = \" content \ "> </div> ";
Temp_float + = "</div> ";
$ ("Body"). append (temp_float );
DialogFirst = false;
}

$ ("# FloatBox. title span"). click (function (){
$ ("# FloatBoxBg"). animate ({opacity: "0"}, "normal", function () {$ (this). hide ();});
$ ("# FloatBox"). animate ({top :( $ (document). scrollTop ()-(height = "auto "? 300: parseInt (height) + "px"}, "normal", function () {$ (this). hide ();});
});

$ ("# FloatBox. title h4" pai.html (title );
ContentType = content. substring (0, content. indexOf (":"));
Content = content. substring (content. indexOf (":") + 1, content. length );
Switch (contentType ){
Case "url ":
Var content_array = content. split ("? ");
$ ("# FloatBox. content"). ajaxStart (function (){
Upload (this).html ("loading ...");
});
$. Ajax ({
Type: content_array [0],
Url: content_array [1],
Data: content_array [2],
Error: function (){
$ ("# FloatBox. content" pai.html ("error ...");
},
Success: function (html ){
$ ("# FloatBox. content" pai.html (html );
}
});
Break;
Case "text ":
$ ("# FloatBox. content" pai.html (content );
Break;
Case "id ":
$ ("# FloatBox. content" ).html ($ ("#" + content + "" ).html ());
Break;
Case "iframe ":
$ ("# FloatBox. content "pai.html (" <iframe src = \ "" + content + "\" width = \ "100% \" height = \ "" + (parseInt (height)-70) + "px" + "\" scrolling = \ "auto \" frameborder = \ "0 \" marginheight = \ "0 \" marginwidth = \ "0 \"> </iframe> ");
}

$ ("# FloatBoxBg"). show ();
$ ("# FloatBoxBg"). animate ({opacity: "0.5"}, "normal ");
$ ("# FloatBox"). attr ("class", "floatBox" + cssName );
$ ("# FloatBox" ).css ({display: "block", left :( ($ (document ). width ()/2-(parseInt (width)/2) + "px", top :( $ (document ). scrollTop ()-(height = "auto "? 300: parseInt (height) + "px", width: width, height: height });
$ ("# FloatBox"). animate ({top :( $ (document). scrollTop () + 50) + "px"}, "normal ");
}

Iii. parameter description

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.

Iv. Application
Dialog (title, content, width, height, cssName );