layui弹窗 iframe子页面弹窗如何覆盖父级页面

末蓝、 2022-04-18 06:14 232阅读 0赞

使用iframe进行嵌套页面，需求要在iframe内点击按钮，出现弹窗，但是实现中发现这个弹窗只覆盖了子页面，父页面内容仍可点击。

要实现覆盖整个页面，这里就需要用到layui中的方法，parent.layer.open(\{\}）。在父级页面打开弹出层。

此处显示的是加载动画，效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70][]

具体操作如下：

注意：在外面的父级页面和iframe里面的子页面都需要，引用layui.js和layui.css

**第一步：在父页面添加**

layui.use('layer', function()\{  
                      var layer = layui.layer;   
            \});

**第二步：在子页面添加**

var index;  
    $(".clickbox").bind("click",function()\{  
              index = parent.layer.open(\{ //在父窗口打开  
                        type: 3,  
                              content: ""  
              \});  
                 setTimeout(function()\{  
                  parent.layer.close(index);  
              \},5000);  
    \});

详细还可参考[https://blog.csdn.net/yufengaotian/article/details/79231552\#commentsedit][https_blog.csdn.net_yufengaotian_article_details_79231552_commentsedit]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70]: /images/20220418/0815871ed8dd4a099ad70c763314b584.png
[https_blog.csdn.net_yufengaotian_article_details_79231552_commentsedit]: https://blog.csdn.net/yufengaotian/article/details/79231552#commentsedit