论坛首页 → Web前端技术论坛 →

AlertBox 弹出层（信息提示框）效果

浏览 11814 次
锁定老帖子 主题：AlertBox 弹出层（信息提示框）效果
精华帖 (1) :: 良好帖 (0) :: 新手帖 (9) :: 隐藏帖 (0)
作者 正文
  • cloudgamer
  • 等级: 三星会员
  • 性别:
  • 文章: 76
  • 积分: 370
  • 来自: 顺德
   发表时间：2010-10-11   最后修改：2010-10-12
弹出层就是相对文档或窗口定位的一个层，一般用来显示提示信息、广告等内容，还可以配合覆盖层来锁定页面。
在仿Lightbox效果中，已经基本实现了这个效果，这次主要改进了ie6在fixed时的抖动问题。
此外，还增加了一个用来兼容ie6的fixed的方法，覆盖层也重新“包装”，程序也改成组件的结构。
兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0



前台效果预览

完整实例下载


程序说明

【实现原理】

弹出层的基本原理在仿Lightbox效果中已经说的差不多了。
关键的地方就是定位，一般相对文档的定位用absolute就行了。
要随屏移动，即相对窗口定位，就用fixed定位。
这些实现起来都很简单，除了不支持fixed的ie6。


【兼容ie6的fixed】

由于ie6本身不支持fixed定位，只能模拟或取巧来间接实现。
最原始的方法是在window的scroll事件中不断修正弹出层的位置，像仿Lightbox效果那样。
后来有人发现还可以通过reflow“离奇”地实现。
但以上方法都有一个缺陷，滚动时弹出层会“发抖”，很不舒服（可以用缓动等来改善）。

想要不发抖，可以通过html和css的巧妙应用来实现，具体参考14px的介绍。
原理是用一个容器代替body，然后对不会动的body绝对定位。
看来很完美，但有一个致命的问题，这个方法需要修改html结构，会影响到相关的一些东西，例如window的scroll事件等。

程序中用了另一个方法，通过body的背景和expression来实现，下面是一个兼容的fixed效果： 
<!DOCTYPE html>
<html>
<head>
<style>
body {
	_background: url(about:blank) fixed;
}
.fixable {
	position:fixed;
	top:100px;
	_position:absolute;
	_top:expression((document).documentElement.scrollTop+100);
}
</style>
</head>
<body style="height:1500px;">
<div class="fixable">fixable</div>
</body>
</html>

以上代码能兼容ie6实现fixed，比较关键的是：
body的background-attachment必须是fixed；
把要fixed的元素设置绝对定位，并且用expression不断修正top/left。
具体原理我也不清楚，可能是body背景在fixed之后，会优先重绘expression的结果。
ps：expression里面必须用eval或加括号，才能不断触发运算（具体原因不明）。
关于这个方法的介绍可以看position: fixed in IE/win和修正IE6不支持position:fixed的bug等。

相比前面的方法，这个是比较完美的了，但也有一些问题，例如body的背景只能用fixed，使用expression资源消耗相对较大。
更大的问题是不能实现用百分比值或right/bottom来定位。
为了解决这个问题，程序使用了一个定位层，这个层用上面的方法实现fixed定位，尺寸跟窗口大小一样，并且位置重合，那么只要用一般的定位方法相对这个层定位，就能达到相对窗口定位的效果了。

兼容程序主要在RepairFixed对象中，首先设置body背景： 
if (body.currentStyle.backgroundAttachment !== "fixed") {
	if (body.currentStyle.backgroundImage === "none") {
		body.runtimeStyle.backgroundRepeat = "no-repeat";
		body.runtimeStyle.backgroundImage = "url(about:blank)";
	}
	body.runtimeStyle.backgroundAttachment = "fixed";
}

参考自DE的IE7.js，用"url(about:blank)"就不需要另外加图片。

再创建定位层： 
layer = document.createElement("<div style='position:absolute;border:0;padding:0;margin:0;overflow:hidden;background:transparent;top:expression((document).documentElement.scrollTop);left:expression((document).documentElement.scrollLeft);width:expression((document).documentElement.clientWidth);height:expression((document).documentElement.clientHeight);display:block;'>");

由于窗口大小可能会改变，除了top/left外，width/height也需要用expression修正。

定位层还要设置"overflow:hidden"，好处是不会因弹出层在document原来的范围外而自动扩大document。
ie6测试以下代码，document会随着下滚而不断扩大： 
<!DOCTYPE html>
<html>
<head>
<style>
body {
	_background: url(about:blank) fixed;
}
.fixable {
	position:absolute;
	top:expression((document).documentElement.scrollTop+(document).documentElement.clientHeight);
}
</style>
</head>
<body>
<div class="fixable">fixable</div>
</body>
</html>

加上"overflow:hidden"就可以防止这种情况。

然后弹出层通过append方法修改为"absolute"定位，并插入到这个定位层，这样就能实现fixed效果了。

由于这个定位层比较耗资源，所以在有元素插入时才会插到body中。
在不需要fixed的时候，要用remove方法从定位层中移除，当定位层内没有需要定位元素就会自动从body移除。
ps：隐藏的话expression还会继续执行，要移出文档才行。


【居中效果】

加入居中扩展程序，并且设置center为true，就会自动相对窗口居中。
居中的原理跟仿Lightbox效果是一样的，通过设置负的元素尺寸一半的margin和"50%"的top/left来居中。
要注意的是不是使用fixed定位时，计算需要加上scrollTop/scrollLeft。


【覆盖层】

在仿Lightbox效果中，ie6的覆盖层是通过创建一个覆盖整个页面的层来做的。
使用新的兼容fixed方法后，就不用另外做兼容，按照fixed的效果做就行了。
覆盖层是由AlertBox扩展而来，它其实就是一个大小跟窗口一样，并且跟窗口重合的弹出层。
由于覆盖层一般只需要定义一个就行了，这里把它做成一个OverLay对象，使用时直接调用它的show和close方法。


【遮盖select】

在仿Lightbox效果中介绍过两种遮盖select的方法：隐藏和iframe。
程序是通过iframe来遮盖的，放在ie6的兼容扩展程序中。
在iframe定位时要注意，要定位到弹出层的负的clientTop/clientLeft，这样才能保证边框不会被遮住。


使用技巧

【定位】

除了居中，程序会按照弹出层本身的定位样式来显示。
不是fixed定位时要注意，在ie6是相对当前窗口来定位的，其他都是相对第一屏窗口来定位的。
还要注意，必须声明DOCTYPE，才能正确定位。
程序为了尽量通用，降低了效率（用了4个expression），所以最好还是根据实际情况自己来调整。
ps：需要像定位提示效果那样预设定位的话，可以自行扩展。

【锁定键盘】

使用覆盖层时，为了防止用户通过键盘操作页面，可以在document的keydown中执行preventDefault来禁用。
如果弹出层需要正常操作，只要在弹出层的keydown中执行stopPropagation就行了。

【拖动弹窗】

这里只是简单的加上拖动功能，要注意的是fixed定位时，计算拖动的参考对象是不同的。
更详细的拖动介绍可以看看这个拖动效果。


使用说明

实例化时，必须有弹出层作为参数： 
new AlertBox("idBox");


可选参数用来设置程序的默认属性，包括：
属性:   默认值//说明
fixed: false,//是否固定定位
zIndex: 1000,//层叠数
onShow: $$.emptyFunction,//显示时执行
onClose: $$.emptyFunction//关闭时执行

还提供了以下方法：
show：显示弹出层；
close：隐藏弹出层；
dispose：销毁程序。

加入兼容ie6扩展程序后，会自动修正ie6的fixed问题，可根据fixSelect属性设置是否修正select遮盖bug，默认是。
加入居中扩展程序后，可根据center属性设置是否居中，默认否。

RepairFixed修正fixed对象，可独立使用，有append和remove方法添加和移除需要fixed的元素，只能在ie6使用。
OverLay覆盖层对象，有如下属性：
属性:   默认值//说明
"color": "#fff",//背景色
"opacity": .5,//透明度(0-1)
"zIndex": 100,//层叠值
还有show和close方法显示和隐藏覆盖层。
  • 大小: 13.7 KB
返回顶楼
         
  • libmw
  • 等级: 初级会员
  • 性别:
  • 文章: 19
  • 积分: 10
  • 来自: 重庆
   发表时间：2010-10-12  
牛人又出新东西了啊！祝贺下下^^
返回顶楼
          回帖地址
0 请登录后投票
  • kjj
  • 等级: 二星会员
  • 性别:
  • 文章: 1018
  • 积分: 266
  • 来自: 陕西
   发表时间：2010-10-13  
做得不错,我用的是blockui
返回顶楼
          回帖地址
0 请登录后投票
  • binlaniua
  • 等级: 初级会员
  • 性别:
  • 文章: 126
  • 积分: 0
  • 来自: 南京
   发表时间：2010-10-13  
JS牛人 又来了。。。
返回顶楼
          回帖地址
0 请登录后投票
  • colver
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 0
  • 来自: 北京
   发表时间：2010-10-14  
cloudgamer 写道
弹出层就是相对文档或窗口定位的一个层，一般用来显示提示信息、广告等内容，还可以配合覆盖层来锁定页面。
在仿Lightbox效果中，已经基本实现了这个效果，这次主要改进了ie6在fixed时的抖动问题。
此外，还增加了一个用来兼容ie6的fixed的方法，覆盖层也重新“包装”，程序也改成组件的结构。
兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0



前台效果预览

完整实例下载


程序说明

【实现原理】

弹出层的基本原理在仿Lightbox效果中已经说的差不多了。
关键的地方就是定位，一般相对文档的定位用absolute就行了。
要随屏移动，即相对窗口定位，就用fixed定位。
这些实现起来都很简单，除了不支持fixed的ie6。


【兼容ie6的fixed】

由于ie6本身不支持fixed定位，只能模拟或取巧来间接实现。
最原始的方法是在window的scroll事件中不断修正弹出层的位置，像仿Lightbox效果那样。
后来有人发现还可以通过reflow“离奇”地实现。
但以上方法都有一个缺陷，滚动时弹出层会“发抖”，很不舒服（可以用缓动等来改善）。

想要不发抖，可以通过html和css的巧妙应用来实现，具体参考14px的介绍。
原理是用一个容器代替body，然后对不会动的body绝对定位。
看来很完美，但有一个致命的问题，这个方法需要修改html结构，会影响到相关的一些东西，例如window的scroll事件等。

程序中用了另一个方法，通过body的背景和expression来实现，下面是一个兼容的fixed效果： 
<!DOCTYPE html>
<html>
<head>
<style>
body {
	_background: url(about:blank) fixed;
}
.fixable {
	position:fixed;
	top:100px;
	_position:absolute;
	_top:expression((document).documentElement.scrollTop+100);
}
</style>
</head>
<body style="height:1500px;">
<div class="fixable">fixable</div>
</body>
</html>

以上代码能兼容ie6实现fixed，比较关键的是：
body的background-attachment必须是fixed；
把要fixed的元素设置绝对定位，并且用expression不断修正top/left。
具体原理我也不清楚，可能是body背景在fixed之后，会优先重绘expression的结果。
ps：expression里面必须用eval或加括号，才能不断触发运算（具体原因不明）。
关于这个方法的介绍可以看position: fixed in IE/win和修正IE6不支持position:fixed的bug等。

相比前面的方法，这个是比较完美的了，但也有一些问题，例如body的背景只能用fixed，使用expression资源消耗相对较大。
更大的问题是不能实现用百分比值或right/bottom来定位。
为了解决这个问题，程序使用了一个定位层，这个层用上面的方法实现fixed定位，尺寸跟窗口大小一样，并且位置重合，那么只要用一般的定位方法相对这个层定位，就能达到相对窗口定位的效果了。

兼容程序主要在RepairFixed对象中，首先设置body背景： 
if (body.currentStyle.backgroundAttachment !== "fixed") {
	if (body.currentStyle.backgroundImage === "none") {
		body.runtimeStyle.backgroundRepeat = "no-repeat";
		body.runtimeStyle.backgroundImage = "url(about:blank)";
	}
	body.runtimeStyle.backgroundAttachment = "fixed";
}

参考自DE的IE7.js，用"url(about:blank)"就不需要另外加图片。

再创建定位层： 
layer = document.createElement("<div style='position:absolute;border:0;padding:0;margin:0;overflow:hidden;background:transparent;top:expression((document).documentElement.scrollTop);left:expression((document).documentElement.scrollLeft);width:expression((document).documentElement.clientWidth);height:expression((document).documentElement.clientHeight);display:block;'>");

由于窗口大小可能会改变，除了top/left外，width/height也需要用expression修正。

定位层还要设置"overflow:hidden"，好处是不会因弹出层在document原来的范围外而自动扩大document。
ie6测试以下代码，document会随着下滚而不断扩大： 
<!DOCTYPE html>
<html>
<head>
<style>
body {
	_background: url(about:blank) fixed;
}
.fixable {
	position:absolute;
	top:expression((document).documentElement.scrollTop+(document).documentElement.clientHeight);
}
</style>
</head>
<body>
<div class="fixable">fixable</div>
</body>
</html>

加上"overflow:hidden"就可以防止这种情况。

然后弹出层通过append方法修改为"absolute"定位，并插入到这个定位层，这样就能实现fixed效果了。

由于这个定位层比较耗资源，所以在有元素插入时才会插到body中。
在不需要fixed的时候，要用remove方法从定位层中移除，当定位层内没有需要定位元素就会自动从body移除。
ps：隐藏的话expression还会继续执行，要移出文档才行。


【居中效果】

加入居中扩展程序，并且设置center为true，就会自动相对窗口居中。
居中的原理跟仿Lightbox效果是一样的，通过设置负的元素尺寸一半的margin和"50%"的top/left来居中。
要注意的是不是使用fixed定位时，计算需要加上scrollTop/scrollLeft。


【覆盖层】

在仿Lightbox效果中，ie6的覆盖层是通过创建一个覆盖整个页面的层来做的。
使用新的兼容fixed方法后，就不用另外做兼容，按照fixed的效果做就行了。
覆盖层是由AlertBox扩展而来，它其实就是一个大小跟窗口一样，并且跟窗口重合的弹出层。
由于覆盖层一般只需要定义一个就行了，这里把它做成一个OverLay对象，使用时直接调用它的show和close方法。


【遮盖select】

在仿Lightbox效果中介绍过两种遮盖select的方法：隐藏和iframe。
程序是通过iframe来遮盖的，放在ie6的兼容扩展程序中。
在iframe定位时要注意，要定位到弹出层的负的clientTop/clientLeft，这样才能保证边框不会被遮住。


使用技巧

【定位】

除了居中，程序会按照弹出层本身的定位样式来显示。
不是fixed定位时要注意，在ie6是相对当前窗口来定位的，其他都是相对第一屏窗口来定位的。
还要注意，必须声明DOCTYPE，才能正确定位。
程序为了尽量通用，降低了效率（用了4个expression），所以最好还是根据实际情况自己来调整。
ps：需要像定位提示效果那样预设定位的话，可以自行扩展。

【锁定键盘】

使用覆盖层时，为了防止用户通过键盘操作页面，可以在document的keydown中执行preventDefault来禁用。
如果弹出层需要正常操作，只要在弹出层的keydown中执行stopPropagation就行了。

【拖动弹窗】

这里只是简单的加上拖动功能，要注意的是fixed定位时，计算拖动的参考对象是不同的。
更详细的拖动介绍可以看看这个拖动效果。


使用说明

实例化时，必须有弹出层作为参数： 
new AlertBox("idBox");


可选参数用来设置程序的默认属性，包括：
属性:   默认值//说明
fixed: false,//是否固定定位
zIndex: 1000,//层叠数
onShow: $$.emptyFunction,//显示时执行
onClose: $$.emptyFunction//关闭时执行

还提供了以下方法：
show：显示弹出层；
close：隐藏弹出层；
dispose：销毁程序。

加入兼容ie6扩展程序后，会自动修正ie6的fixed问题，可根据fixSelect属性设置是否修正select遮盖bug，默认是。
加入居中扩展程序后，可根据center属性设置是否居中，默认否。

RepairFixed修正fixed对象，可独立使用，有append和remove方法添加和移除需要fixed的元素，只能在ie6使用。
OverLay覆盖层对象，有如下属性：
属性:   默认值//说明
"color": "#fff",//背景色
"opacity": .5,//透明度(0-1)
"zIndex": 100,//层叠值
还有show和close方法显示和隐藏覆盖层。
返回顶楼
          回帖地址
0 请登录后投票
  • colver
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 0
  • 来自: 北京
   发表时间：2010-10-14  
e？  不熟悉这个网站  哈哈 居然把原文弄出来了  不好意思
返回顶楼
          回帖地址
0 请登录后投票
  • www88485400
  • 等级: 初级会员
  • 性别:
  • 文章: 13
  • 积分: 40
  • 来自: 北京
   发表时间：2010-10-14  
挺好的 先打个标有空再看
返回顶楼
          回帖地址
0 请登录后投票
  • netbuddy
  • 等级: 初级会员
  • 性别:
  • 文章: 35
  • 积分: 0
  • 来自: 北京
   发表时间：2010-10-15  
楼主JS大牛
返回顶楼
          回帖地址
0 请登录后投票
  • pengyanqing
  • 等级: 初级会员
  • 性别:
  • 文章: 4
  • 积分: 30
  • 来自: 南京
   发表时间：2010-10-16  
楼车牛人啊..
返回顶楼
          回帖地址
0 请登录后投票
  • tonywong205
  • 等级: 初级会员
  • 性别:
  • 文章: 4
  • 积分: 30
  • 来自: 深圳
   发表时间：2010-10-17  
可惜不能遮罩住frameset中另外的网页，有谁有好的办法，麻烦通知我。谢谢～
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics