Home  >  Article  >  Web Front-end  >  jquery pop-up login window implementation code_jquery

jquery pop-up login window implementation code_jquery

WBOY
WBOYOriginal
2016-05-16 18:38:14845browse

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:



title

Close

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 ="
";
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").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);
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn