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

本文主要是介绍layui弹窗 iframe子页面弹窗如何覆盖父级页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

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

具体操作如下：

注意：在外面的父级页面和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

 

这篇关于layui弹窗 iframe子页面弹窗如何覆盖父级页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---