Jquery pop-up login window implementation code _ jquery

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 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:

The Code is as follows:

Title closed

Content

The corresponding style is as follows:

The 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:

The 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 ="

";
Temp_float + ="

";
Temp_float + ="

";
Temp_float + ="

";
Temp_float + ="

";
$ ("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 ("");
}

$ ("# 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 );