标签:文档 设置 定位 使用 rip java 动态插入 特殊 遮罩层
关键点:
css的position定位为fixed或absolute
css的z-index, 最顶层的值最大如遮罩层为0那么弹出框最好是大于等于1的整数,总之记住弹出层要比遮罩的z-index值大就行
如果弹出模态框的使用场景没有嵌套在iframe或frame中掌握以上两点加上点css功底就可以写出漂亮的模态框了
特殊场景会涉及到跨域问题,可以在父页面和子页面分别设置<script type="text/javascript">document.domain="xxx.com"</script>对应到你的域名,如果在内外使用ip作为url可以不用设置这一项
在子页面中获取父页面的body对象var body = parent.document.body; 然后将你的遮罩层动态插入父页面内部第一个位置或body标签上面,使用dom或jQuery都可以实现(可以参照文档)
将模态框也插入父窗口并显示与遮罩层上部
点击 模态框的 关闭按钮, 确定按钮 等操作后 移除遮罩对象再移除模态框对象即可
例如(以jQuery为例):
删除父窗口body标签上面的遮罩对象
插入模态框到父页面(显示在遮罩层上方由z-index决定)
$(modal).append($(parent.document.body))
删除父窗口的模态框对象
$(parent.document.body).find(‘.modal-beautiful‘).first().remove();// 使用jQuery获取父页面Body的遮罩对象并删除, first可以不用加的
标签:文档 设置 定位 使用 rip java 动态插入 特殊 遮罩层
原文地址:http://www.cnblogs.com/YingYue/p/7327862.html