jquery pop-up login window implementation code

jquery pop-up login window implementation code_jquery

WBOY

Release： 2016-05-16 18:38:14

Original

882 people have browsed it

The main layer is centered left and right. Set left equal to the width of the window divided by two minus the width of the own layer divided by two. As for the upper and lower centering of the window, I did not do it. I fixed top equal to the scrollTop of the scroll bar hidden plus 50px;

When an event triggers this class, first determine whether the two layers have been appended to the body, otherwise it will keep increasing every time it is triggered. Five parameters title, content, width, height, and cssName are set, which respectively define the style name of the layer title, content within the layer, layer width, layer height, and layer content. The content in the layer is set up with four loading methods: url, text, id, and iframe. The HTML content of the target url is loaded through ajax through get or post. text is to write content directly in the event, and id is to obtain an id on the page. The html inside is displayed in the pop-up layer, and the iframe knows that the target url is displayed in the frame in the layer. Often the content styles in the pop-up layer are also various, so a parameter cssName is added, through which the content in the layer can be arranged.

1. The html of the popup layer is as follows:

Copy the code The code is as follows:

 titleClose

content

The corresponding style is as follows:

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

Second, pop-up window js file As follows:

Copy code 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 ="

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

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

三，参数说明

顺序	参数	功能	备注
1	title	弹出层的标题	必填，纯文本
2	content	弹出层的内容	:url	get或post某一页面里的html，该页面要求只包含body的子标签
			:text	直接写入内容
			:id	显示页面里某id的子标签
			:iframe	层内内容以框架显示
3	width	弹出层的宽	必填，css值，比如“200px”
4	height	弹出层的高	如上，但是可用“auto”
5	cssName	弹出层的css	给id floatBox加入的样式名，层内样式可以通过这个样式名来定制

四，应用
dialog(title,content,width,height,cssName);