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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
一些mootools的学习资源
Feb 07 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 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获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
大学在校生求职信范文
2013/11/21 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
房屋产权证明书
2014/10/15 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技