layui自定义dom弹框

最新推荐文章于 2021-09-15 09:57:24 发布

177大高个

最新推荐文章于 2021-09-15 09:57:24 发布

阅读量391

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/helloWolfs/article/details/116429485

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./jquery-1.11.2.min.js"></script>
    <script src="./layui/layui.all.js"></script>
    <style>
        .ydool-open-content .ydool-open-title {
            font-size: 16px;
            text-align: center;
            color: #333333;
            line-height: 20px;
            margin-top: 24px;
            margin-bottom: 8px;
            font-weight: bold;
        }
        .ydool-open-content .ydool-open-p {
            font-size: 14px;
            text-align: center;
            color: #999999;
            line-height: 20px;
            padding: 0 24px;
            margin-bottom: 20px;
        }
        /* 以skin的自定义类名写的样式 */
        .custombox.layui-layer-page .layui-layer-btn {
            padding: 0;
            display: flex;
            border-top: 1px solid #ebedf0;
        }
        .custombox.layui-layer-page .layui-layer-btn a {
            margin: 0;
            flex: 1;
            text-align: center;
            height: 48px;
            line-height: 48px;
            border: none;
            color: #666666;
            font-size: 16px;
            padding: 0;
        }
        .custombox.layui-layer-page .layui-layer-btn a.layui-layer-btn0 {
            color: #195fe3;
            background-color: #ffffff;
            border-right: 1px solid #ebedf0;
        }
    </style>
</head>

<body>
    <button id="btn">我是测试按钮</button>
    <script type="text/html" id="ydool-if">
        <div class="ydool-open-content">
            <h4  class="ydool-open-title">提示</h4>
            <p class="ydool-open-p">是否退出当前账号？</p>
        </div>
    </script>
    <script>
        $('#btn').on('click', function () {
            var reject = document.getElementById('ydool-if').innerHTML;
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ['310px'],
                shadeClose: true,  //false-点击弹出层外不能关闭
                // skin: 'ydool-openIf',  //自定义样式类名
                skin: 'custombox',
                content: reject
                , btn: ['确 定', '取 消']
                , yes: function (index) {
                    layer.close(index);
                }
            });
        })
    </script>
</body>
</html>

177大高个

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui自定义dom弹框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
复制链接

扫一扫