jquery Pop-up Login window implementation code _jquery

The main layer is centered, left is equal to the window width minus its own layer width in addition to the second center, as for the window up and down center I did not do, fixed top equal to the scroll bar hidden scrolltop plus 50px;

When the event triggers this class, first determine whether two layers have been append into the body, or it will increase each time the trigger is triggered. Set five parameters title, content, width, height, cssname, respectively, they define the layer title, layer content, layer width, layer height, layer content style name. Layer content and set the URL, text, ID, iframe four load mode, through Ajax to get or post load the HTML content of the target URL, text is directly in the event to write content, and the ID is to obtain a page on the ID inside the HTML display to the pop-up layer, The IFRAME knows that it is inside the layer to display the target URL in the frame. Often the pop-up layer inside the content style is also a variety of, so add a parameter cssname, through which you can arrange the content of the layer.

One, the pop-up layer of HTML is as follows:

Copy Code code as follows:

<div id= "FLOATBOXBG" >
<div id= "Floatbox" class= "Floatbox" >
<div class= "title" ><div class= "Content" > Contents </div>
</div>
</div>

The corresponding style is as follows:

Copy code code 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;
}

Second, pop-up window JS file is as follows:

Copy Code code 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"). 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 () {
$ (this). html ("Loading ...");
});
$.ajax ({
Type:content_array[0],
URL:CONTENT_ARRAY[1],
DATA:CONTENT_ARRAY[2],
Error:function () {
$ ("#floatBox. Content"). HTML ("error ...");
},
Success:function (HTML) {
$ ("#floatBox. Content"). HTML (HTML);
}
});
Break
Case "Text":
$ ("#floatBox. Content"). HTML (content);
Break
Case "id":
$ ("#floatBox. Content"). HTML ($ ("#" +content+ ""). html ());
Break
Case "iframe":
$ ("#floatBox. Content"). 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");
}

Third, parameter description

Order	Parameters	function	Notes
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 in a page that requires only the child label of the body
			: Text	Write directly to content
			: ID	Displays a child label for an ID in the page
			: IFRAME	The content in the layer is displayed in the frame
3	width	The width of the pop-up layer	Required, CSS values, such as "200px"
4	Height	The height of the pop-up layer	As above, but available "auto"
5	Cssname	CSS for pop-up layer	A style name that is added to the ID floatbox, which can be customized by the style name

Four, the application
Dialog (Title,content,width,height,cssname);