弹出层（弹窗）就是相对文档或窗口定位的一个层，一般用来显示提示信息、广告等内容，还可以配合覆盖层来锁定页面。
在仿Lightbox效果中，已经基本实现了这个效果，这次主要改进了ie6在fixed时的抖动问题。
此外，还增加了一个用来兼容ie6的fixed的方法，覆盖层也重新“包装”，程序也改成组件的结构。
兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0

效果预览

覆盖select测试

关闭
关闭

程序说明

【实现原理】

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

【兼容ie6的fixed】

由于ie6本身不支持fixed定位，只能模拟或取巧来间接实现。
最原始的方法是在window的scroll事件中不断修正弹出层的位置。
后来有人发现还可以通过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>

相比前面的方法，这个是比较完美的了，但也有一些问题，例如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";
}

再创建定位层：

代码

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;'>");

定位层还要设置"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><divclass="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定位时，计算拖动的参考对象是不同的。
更详细的拖动介绍可以看看这个拖动效果。

【遮盖flash】

有时显示出即使设置了zIndex也会被flash遮住，只要给flash添加一个wmode属性设置其值为transparent，即把flash设置透明就行了。

使用说明

实例化时，必须有弹出层作为参数：

newAlertBox("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方法显示和隐藏覆盖层。

完整实例下载

转载于:https://www.cnblogs.com/cloudgamer/archive/2010/10/11/AlertBox.html

AlertBox 弹出层（信息提示框）效果相关推荐

  1. html关闭页面弹出再见信息提示框,js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框//====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 functi ...

  2. Framework7中弹出确认信息提示框，取消/确定

    使用Framework7框架进行开发时,如果需要弹出确认信息提示框之后根据用户选择再进行后续操作,相关代码如下: myApp.confirm('确定删除此订单吗?', '系统提示',     func ...

  3. iOS中Mach异常和signal信号介绍，以及当APP崩溃时做线程保活弹出程序异常提示框

    我们经常会遇到APP闪退和崩溃的问题,那么我们应该通过什么变量去监听APP的异常呢?如何在程序崩溃时,保证程序不闪退,并给用户弹出一个提示框呢? 这是本文将要讲述的内容. 先介绍2个概念,Mach异常 ...

  4. 批量删除，未勾选数据，点击【批量删除】弹出确认删除提示框

    批量删除,未勾选数据,点击[批量删除]弹出确认删除提示框 给table组件,添加ref="selections" 在分页方法中,添加方法.设置为空

  5. mt6735 Audio framework]音量警告提示框选择OK，重启后再增大音量希望还会弹出音量警告提示框

    [DESCRIPTION] 目前的做法是: 音量警告提示框选择OK,重启后就不会再弹出警告提示框, 除非恢复出厂设置 如果希望重启后再增大音量希望还会弹出音量警告提示框 请参考如下修改: [SOLUT ...

  6. Django使用JavaScript弹出确认删除提示框

    问题描述:删除数据时,为了避免误删,要在删除之前弹出提示框,用户点击确认删除之后才将相应数据删除. 工具与环境:JavaScript web开发 Django框架 python 1.JavaScrip ...

  7. 关于selenium关闭chrome密码登录时弹出的密码提示框

    最近在使用chrome登录网站的时候总有密码保存提示框(并不是所有的都会有密码保存提示框) 其实只需要设置启动chrome的相关参数就可以避免这种问题,参数: prefs["credenti ...

  8. IE浏览器下载excel文件时不弹出下载保存提示框的解决方法

    在IE浏览器中下载文件的时候,下载保存的提示框不弹出了,特意咨询了一下解决的方法,特来和大家分享. 1.打开"我的电脑"后请点击工具列的:"工具 -- 文件夹选项&quo ...

  9. ios swift5 弹出原生的提示框（弹框） UIAlertController

    文章目录 1.从中间弹出,限制textfield的内容长度 1.1 截图 1.2 代码 1.3 参考 2.从下面弹出 2.1 截图 2.2 代码 3.其他举例 3.1 下面只有一个确定按钮(带截图和代 ...

最新文章

  1. 选型必看：RabbitMQ 七战 Kafka，差异立现
  2. 北大数学天才许晨阳，回国效力6年后，为什么又去了美国任教？
  3. $\mathbf{R}^n$中的紧集是闭有界集
  4. R语言ggplot2可视化箱图（boxplot）时忽视异常值(outlier)并重新分配坐标轴的范围是的可视化的箱图可以有效显示箱体实战
  5. ElementNotVisible exception in Selenium WebDriver
  6. Android 程序适应多种多分辨率
  7. selenide_使用Selenide进行有效的UI测试
  8. SmartFox中的類型轉換
  9. 网络请求中常见的加密机制和加密算法理解
  10. spark学习-Spark广播变量与共享变量（1）
  11. 基于深度学习的个性化新闻推荐.pdf（附下载链接）
  12. Unsupported major.minor version (jdk版本错误)解决方案办法
  13. Remote Desktop Manager for Mac(远程桌面管理工具)
  14. 6个常用的Python编程开发工具
  15. java矩阵连乘动态规划_动态规划之矩阵连乘
  16. 汽车电子学习笔记---CAN网络（二）
  17. Java开发微信小程序(三)用小程序给用户推送服务消息
  18. Word 2003 出现 向程序发送命令时出现问题 的 解决方案
  19. matlab编译后方交会,后方交会MATLAB程序实习报告.docx
  20. word文档在线编辑推荐超级文档

热门文章

  1. [存储引擎基础知识]InnoDB与MyISAM的六大区别（非原创）
  2. C++ sprintf 函数的使用
  3. 系统思考与《第五项修炼》
  4. Rails 应用使用 Capistrano2 部署流程
  5. 质保、保修、包修：含义不同
  6. [代码]HDU 4335 What is N?
  7. 国内第一本项目管理的实践书籍——《IT项目管理那些事儿》
  8. sdut 1500 Message Flood
  9. Coil - Google推荐的协程图片加载库
  10. 第五章spring框架基础