美文网首页
Layui switch 确定之后才改变状态

Layui switch 确定之后才改变状态

作者: 吕保鑫 | 来源:发表于2020-05-14 14:39 被阅读0次
    
    <input type="checkbox" lay-skin="switch" lay-filter="keywordsreply" lay-text="开启|关闭">
    <div class="iframe_cover" style="display: none;"></div>
    <div class="delDiv" style="display: none;">
            <div class="titleDiv">
                <p>删除提示</p>
            </div>
            <div class="dialogDiv">
                <p></p>
            </div>
            <div class="dialogBtn">
                <span class="del_confirm">确定</span>
                <span class="cancel">取消</span>
            </div>
        </div>
    
    
    .delDiv {
        width: 400px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -100px 0 0 -200px;
        border: 1px solid #ededed;
        z-index: 1000;
        background: #fff;
        text-align: left;
        color: #000;
    }
    
    .del_confirm {
        border: 1px solid #f75454;
        color: #f75454;
    }
    
        .del_confirm:hover {
            background: #f75454;
            color: #fff;
        }
    
    
    .delDiv .dialogDiv p {
        font-size: 13px;
        align-items: center;
        line-height: 20px;
        text-align: center;
        padding: 10px 0 10px;
    }
    .titleDiv {
        position: absolute;
        top: 0;
        line-height: 40px;
        left: 0;
        right: 0;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        padding-left: 15px;
        color: #333;
    }
    .delDiv .dialogDiv {
        position: absolute;
        top: 40px;
        bottom: 45px;
        left: 0;
        right: 0;
        padding: 20px;
    }
    .dialogBtn {
        position: absolute;
        bottom: 0;
        height: 60px;
        left: 0;
        right: 0;
        text-align: right;
    }
    
        .dialogBtn span {
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            display: inline-block;
            margin-top: 15px;
            margin-right: 15px;
            border-radius: 3px;
            font-size: 13px;
            cursor: pointer;
        }
    .iframe_cover {
        opacity: 0.5;
        background: #D9E9FF;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        z-index: 999;
    }
    
    //监听指定开关
            layui.use('form', function () {
                var form = layui.form
                , layer = layui.layer
                form.on('switch(keywordsreply)', function (data) {
                    var x = data.elem.checked;
                    if (!x) {
                        $(top.$('.delDiv .titleDiv p')).text('提示');
                        $(top.$('.delDiv .dialogDiv p')).html('关闭关键词回复将影响问题列表中问题答案的正常执行。<br> 确定要关闭关键词回复?');
                        $(top.$('.delDiv .dialogDiv p')).css('text-align',"left");
                        $(top.$('.iframe_cover')).show();
                        $(top.$('.delDiv')).show();
                        $(top.$('.delDiv .del_confirm')).unbind('click').click(function () {
                            data.elem.checked = x;
                            form.render();
                            $(top.$('.iframe_cover')).hide();
                            $(top.$('.delDiv')).hide();
                        });
                        //取消
                        $(top.$('.delDiv .cancel')).click(function () {
                            data.elem.checked = !x;
                           form.render();
                            $(top.$('.iframe_cover')).hide();
                            $(top.$('.delDiv')).hide();
                        });
                       return false;
                    }
                });
            });
    

    相关文章

      网友评论

          本文标题:Layui switch 确定之后才改变状态

          本文链接:https://www.haomeiwen.com/subject/olytohtx.html