码迷,mamicode.com
首页 > 其他好文 > 详细

iframe中的模态框遮罩父窗口原理

时间:2017-08-09 23:58:21      阅读:413      评论:0      收藏:0      [点我收藏+]

标签:文档   设置   定位   使用   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标签上面
 $(mask).insertBefore($(parent.document.body))

删除父窗口body标签上面的遮罩对象

 $(parent.document.body.previousSibling).first().remove();// 使用jQuery获取父页面Body的遮罩对象并删除

插入模态框到父页面(显示在遮罩层上方由z-index决定)

 $(modal).append($(parent.document.body))

删除父窗口的模态框对象

$(parent.document.body).find(‘.modal-beautiful‘).first().remove();// 使用jQuery获取父页面Body的遮罩对象并删除, first可以不用加的

iframe中的模态框遮罩父窗口原理

标签:文档   设置   定位   使用   rip   java   动态插入   特殊   遮罩层   

原文地址:http://www.cnblogs.com/YingYue/p/7327862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!