使用layui框架弹出层内部为另一个页面，如何使用弹出框内页面按钮关闭弹出层。

最新推荐文章于 2021-12-23 09:27:32 发布

纯纯要加油

最新推荐文章于 2021-12-23 09:27:32 发布

阅读量2.1k

点赞数 3

文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_40422692/article/details/107494740

版权

1.首先我们来看父页面的主要内容（因为本身的button控件有问题，所以这里用a标签添加样式来代替了button控件，所以下面的id只是为了方便添加样式，onclick事件才是关键）

    <form id="form1" runat="server">
    <div>
        <a id="clickme_open" onclick = "ClickMe_open()">点击我，弹出新窗口</a>
    </div>
    </form>
    <script>
        //打开一个窗口（这是使用layui产生的效果，记得引入哦）
        function ClickMe_open() {
            layer.open({
                type: 2,
                skin: 'layui-layer-rim', 
                area: ['550px', '350px'], 
                content: 'ChildPage.aspx'
            });
        }
    </script>
</body>

2.现在来看子页面的主要内容

<body>
    <form id="form1" runat="server">
    <div>
        <a id="clickme_close" onclick="ClickMe_close()">点击我，关闭弹出框</a>
    </div>
    </form>
    <script>
        var index = parent.layer.getFrameIndex(window.name);//获取窗口索引
        function ClickMe_close() {
            parent.layer.close(index);
        }
    </script>
</body>

3.当我们运行父页面并点击里面的按钮时，会出现下图的内容
在这里插入图片描述
4.现在点击子页面传入上buttun就可以关闭掉这个页面了。