php弹出登录窗口代码,jquery 弹出登录窗口实现代码_jquery

主要层左右居中，设置left等于窗口宽除二减去自身层宽除二就居中了，至于窗口上下居中我没做到，固定了top等于滚动条隐去的 scrollTop加上50px;

当事件触发这个类时，首先判断一下两个层是否已经append到body里面，否则每次触发它就一直增加增加了。设置了五个参数title、 content、width、height、cssName，它们分别定义了层标题、层内内容、层宽、层高、层内容的样式名。层内内容又设置了url、 text、id、iframe四种加载方式，通过ajax以get或post加载目标url的html内容，text是直接在事件里写入内容，而id是取 得页面上某个id里面的html显示到弹出层里，iframe都知道是在层里面以框架显示目标url了。往往弹出层里面的内容样式也是各种各样的，所以加 了一个参数cssName，通过它就可以把层内的内容给排好了。

一，弹出层的html如下：

标题关闭

内容

其对应样式如下：

#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;

}

二，弹出窗口js文件如下：

// 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);

本文原创发布php中文网，转载请注明出处，感谢您的尊重！