Html -- layer 多层弹框，遮罩层及方法调用

本文链接：https://blog.youkuaiyun.com/sky_eyeland/article/details/102802027

1、基本思路

涉及到三个页面，两层弹窗
第一个页面需要给第二个页面传参
第二个页面需要调用第一个页面的方法
第三个页面需要调用第一个、第二个页面的方法

2、第一层页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../plugins/layer/layer.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h1>第一层页面</h1>
        <button onclick="openSecond()">打开第二层页面</button>
    </body>
    <script type="text/javascript">
        function openSecond(){
            top.layer.open({
                type: 2,
                title: "第二层页面",
                content: "second.html",
                area: ['1000px', '600px'],
                success: function(layero, index){
                    //获取第二个页面
                    var iframe = window['layui-layer-iframe' + index];
                    //调用第二个页面的方法
                    iframe.firstParams("haha");
                }
            })
        }
        
        //第一层页面方法
        function firstMethod(){
            alert("firstMethod");
        }
    </script>
</html>

3、第二层页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../plugins/layer/layer.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h1>第二层页面</h1>
        <button onclick="openThird()">打开第三层页面</button>
        <button onclick="getFirstMethod()">调用第一层方法</button>
    </body>
    <script type="text/javascript">
        function openThird(){
            top.layer.open({
                type: 2,
                title: "第三层页面",
                content: "third.html",
                area: ['600px', '300px'],
            })
        }
        
        //调用第一个页面的方法
        function getFirstMethod(){
            parent.firstMethod();
        }
        
        //第二个页面的方法
        function secondMethod(){
            alert("secondMethod");
        }        
    </script>
</html>

4、第三层页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h1>第三层页面</h1>
        <button onclick="getFirstMethod()">调用第一层方法</button>
        <button onclick="getSecondMethod()">调用第二层方法</button>
        <button onclick="getThirdMethod()">另类调用本页面方法</button>
    </body>
    <script type="text/javascript">
        //调用第一个页面的方法
        function getFirstMethod(){
            parent.firstMethod();
        }
		
        //调用第二个页面的方法
        function getSecondMethod(){
            top.$("iframe")[0].contentWindow.secondMethod();
        }

        //另类调用本页面方法
        function getThirdMethod(){
            top.$("iframe")[1].contentWindow.thirdMethod();
        }
    
        function thirdMethod(){
            alert("thirdMethod");
        }
    </script>
</html>