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 相关文章推荐
javascript列表框操作函数集合汇总
Nov 28 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
易被忽视的js事件问题总结
May 14 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
JavaScript分页组件使用方法详解
Jul 26 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上传文件中文文件名乱码的解决方法
2013/11/01 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
Python实现合并字典的方法
2015/07/07 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
python的常见矩阵运算(小结)
2019/08/07 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
Python 爬虫的原理
2020/07/30 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
推荐信怎么写
2014/05/09 职场文书
教师考核材料
2014/05/21 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
单位租房协议书样本
2014/10/30 职场文书
安全生产协议书
2016/03/22 职场文书
导游词之镇江焦山
2019/11/21 职场文书