关键点：
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可以不用加的