主要层左右居中，设置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如下： 复制代码 代码如下: <div id="floatBoxBg"> <div id="floatBox" class="floatBox"> <div class="title"><h4>标题</h4><span>关闭</span></div> <div class="content">内容</div> </div> </div> 其对应样式如下： 复制代码 代码如下: #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="<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"><h4></h4><span><img src="/upload/2009-12/20091224021446804.gif" width="22" height="23" /></span></div>"; 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 淡入淡出、展开收缩菜单实现代码

效果图:运行以后，刷新下即可。 jQuery淡入淡出、展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#ff>>>详细阅读

本文标题：jquery 弹出登录窗口实现代码

地址：http://www.17bianji.com/kaifa2/JS/27427.html

 1/2    1