主要层左右居中,设置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,通过它就可以把层内的内容给排好了。
jquery 弹出登录窗口实现代码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");
}

三,参数说明
顺序 参数 功能 备注 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);
标签:
jquery,弹出登录窗口

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“jquery 弹出登录窗口实现代码”
暂无“jquery 弹出登录窗口实现代码”评论...