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 相关文章推荐
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
phpmyadmin操作流程
2006/10/09 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
利用Python演示数型数据结构的教程
2015/04/03 Python
Python简明入门教程
2015/08/04 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
详解python3中zipfile模块用法
2018/06/18 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
python def 定义函数,调用函数方式
2020/06/02 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
本科生学习总结的自我评价
2013/10/02 职场文书
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
中学生逃课检讨书
2015/02/17 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
2016继续教育研修日志
2015/11/13 职场文书