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

Posted 2020-10-02

关键点：

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可以不用加的