前端原生自定义confirm

前端原生自定义confirm

样式图片
大致样式是这样的喜欢的可以讨论一下
html代码

<style>
        /*自制confirm样式*/
            .backgCover{
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                text-align: center;
                /* background: #ccc; */
                z-index: 2030;
            }
            .cover {
                display: inline-block;
                width: 420px;
                padding-bottom: 10px;
                vertical-align: middle;
                background-color: #fff;
                border-radius: 4px;
                border: 1px solid #ebeef5;
                font-size: 18px;
                box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
                text-align: left;
                overflow: hidden;
                backface-visibility: hidden;
                margin-top: 15%;
            }
            .confirmbox {
                width: 100%;
                height: 100%;
            }
            .confirmbox .line1{
                font-size: 14px;
                border-bottom: 1px solid #ccc;
                font-weight: bold;
                height: 30px;
                line-height: 30px;
                padding-left: 10px;
                /* background-color: aliceblue; */
            }
            .contText{
                display: flex;
                align-items: center;
                height: 95px;
                font-size: 14px;
            }
            .button-out-box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 5px
        }
        .button-out-box > button{
             
            width: 50px;
            height: 30px;
            margin-right: 10px !important;
            border-radius: 5px;
            cursor: pointer;
            color: #fff;
            border: 1px solid #ccc;
            background-color: #3366cc;
            margin-top:5px;

        }
        .backgCoverModel{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: .5;
            background: #000;
            z-index: 2029;
        }
    </style>

js部分

  

        var myConfirm = function(title,content, type, resCallback) {
        var divCont = '<div class="backgCover">' + '<div class="cover"><div class="confirmbox"><div class="line1">' + title + 
            '<img id="delCancle" src="./del.png" style="cursor: pointer;height:16px;width:16px;float:right;margin: 7px 10px 0px 0px;">' +
            '</div>'+ '<div class="contText">'+ '<img src="./message.png" style="height:32px;width:32px;margin:0px 10px;">'+ content + 
            '</div>'+'<div class="line2 button-out-box">';
        if(type == 1){ 
            divCont += '<button class="cancle" id="cancle" style="background-color:#fff;color:#000">' + '取消' + '</button><button class="sure" id="sure">' + '确定' + '</button>';
        }else if(type == 2) {
            divCont += '<button class="cancle" id="cancle">' + '确定' + '</button>';
        }
            divCont += '</div></div></div> </div>' + '<div class="backgCoverModel"></div>';
            $('body').append(divCont)
            $('.backgCover').show();
            $('.backgCoverModel').show();
            $('#cancle').click(function(){
                $('.backgCover').remove();
                $('.backgCoverModel').remove();
                resCallback({
                    'status': false
                });
            });
            $('#sure').click(function(){
                $('.backgCover').remove();
                $('.backgCoverModel').remove();
                resCallback({
                    'status': true
                });
            });
            $('#delCancle').click(function(){
                $('.backgCover').remove();
                $('.backgCoverModel').remove();
                resCallback({
                    'status': false
                });
            });
        }
        // //传1两个按钮 2 一个按钮
        // myConfirm('配件添加成功提示','是否确定同步spu？','1',function(res){
        //         console.log(res);
        //         if(res.status){
        //         //用户点击确定 
        //         console.log(1111)						
        //         }else {
        //         //用户点击取消
        //         console.log(222)
        //         }
        //     });
        function open1(){
            myConfirm('配件添加成功提示','是否确定同步spu？','2',function(res){
                console.log(res);
                if(res.status){
                //用户点击确定 
                console.log(1111)						
                }else {
                //用户点击取消
                console.log(222)
                }
            });
        }
        function open2(){
            myConfirm('配件添加成功提示','是否确定同步spu？','1',function(res){
                console.log(res);
                if(res.status){
                //用户点击确定 
                console.log(444)						
                }else {
                //用户点击取消
                console.log(555)
                }
            });
        }

把open1 和open2 两个事件随便绑定上两个按钮上就可以啦
事件绑定

<button οnclick="open1()">点击打开样式一</button>
        <button οnclick="open2()">点击打开样式二</button>

样式一
样式二

后续事件写在myConfirm里面就可以啦
记得引入一下jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>