jquery 弹出登录窗口实现代码


Posted in Javascript onDecember 24, 2009

主要层左右居中,设置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 弹出登录窗口实现代码
一,弹出层的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);
Javascript 相关文章推荐
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 #Javascript
JQuery 写的个性导航菜单
Dec 24 #Javascript
JavaScript中出现乱码的处理心得
Dec 24 #Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 #Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 #Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 #Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 #Javascript
You might like
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
php4的session功能评述(一)
2006/10/09 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
超市后勤自我鉴定
2014/01/17 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
安全承诺书格式
2014/05/21 职场文书
户外宣传策划方案
2014/05/25 职场文书
信访稳定工作汇报
2014/10/27 职场文书
蓬莱阁导游词
2015/02/04 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python