jquery 弹出登录窗口实现代码
作者:bea
主要层左右居中,设置left等于窗口宽除二减去自身层宽除二就居中了,至于窗口上下居中我没做到,固定了top等于滚动条隐去的 scrollTop加上50px; 当事件触发这个类时,首先判断一下两个层是否已经append到body里面,否则每次触发它就一直增加增加了。设置了五个参数title、 content、width、height、cssName,它们分别定义了层标题、层内内容、层宽、层高、层内容的样式名。层内内容又设置了url、 text、id、iframe四种加载方式,通
主要层左右居中,设置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);
有用 | 无用
当事件触发这个类时,首先判断一下两个层是否已经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 常见开发使用技巧总结
- javascript 最常用的10个自定义函数[推荐]
- javascript下利用数组缓存正则表达式的实现方法
- js 创建一个浮动div的代码
- 默认让页面的第一个控件选中的javascript代码
- js tab效果的实现代码
- javascript 计算两个整数的百分比值
- 键盘上下键移动选择table表格行的js代码
- javascript 闪烁的圣诞树实现代码
- 用Javascript同时提交多个Web表单的方法
- 再谈javascript 动态添加样式规则 W3C校检
- javascript Array对象使用小结
- javascript 键盘事件总结 推荐
- javascript 异步的innerHTML使用分析
- javascript 鼠标事件总结
- javascript 处理事件绑定的一些兼容写法
- javascript 事件加载与预加载
- Javascript 键盘keyCode键码值表
- JQuery与iframe交互实现代码