JavaScript confirm 自定义风格及功能实现

2023-09-05 08:43:34

在网上找了一些弹窗插件，例如bootbox, 功能和动画效果都做的很好，但是很难自定义样式。

项目需要，Google相关方法后写了一个Demo, 没有JavaScript confirm切断线程的功能，但是使用了回调函数，足以实现弹窗对话效果。

效果图：

HTML代码

<div class="wrap-dialog hide">
    <div class="dialog">
        <div class="dialog-header">
            <span class="dialog-title">删除确认</span>
        </div>

        <div class="dialog-body">
            <span class="dialog-message">你确认删除此条信息？</span>
        </div>

        <div class="dialog-footer">
            <input type="button" class="btn" id="confirm" value="确认" />
            <input type="button" class="btn ml50" id="cancel" value="取消" />
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        console.log("jquery ...");
        $('#remove').click(function(){
            var message = "你确认删除此条信息？？";
            dialogBox(message,
                function () {
                    console.log("confirmed");
                    // do something
                },

                function(){
                    console.log("canceled");
                    // do something
                }
            );
        });
    });

    function dialogBox(message, yesCallback, noCallback){

        if(message){
            $('.dialog-message').html(message);
        }

        // 显示遮罩和对话框
        $('.wrap-dialog').removeClass("hide");

        // 确定按钮
        $('#confirm').click(function(){
            $('.wrap-dialog').addClass("hide");
            yesCallback();
        });

        // 取消按钮
        $('#cancel').click(function(){
            $('.wrap-dialog').addClass("hide");
            noCallback();
        });
    }
</script>

完整代码

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>js confirm弹出框自定义样式</title>
<style>
    html,body {
        margin: 0;
        padding: 0;
        font-family: "Microsoft YaHei";
    }

    .wrap-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 16px;
        text-align: center;
        background-color: rgba(0, 0, 0, .4);
        z-index: 999;
    }

    .dialog {
        position: relative;
        margin: 15% auto;
        width: 300px;
        background-color: #FFFFFF;
    }

    .dialog .dialog-header {
        height: 20px;
        padding: 10px;
        background-color: lightskyblue;
    }

    .dialog .dialog-body {
        height: 30px;
        padding: 20px;
    }

    .dialog .dialog-footer {
        padding: 8px;
        background-color: whitesmoke;
    }

    .btn {
        width: 70px;
        padding: 2px;
    }

    .hide {
        display: none;
    }

    .ml50 {
        margin-left: 50px;
    }
</style>
</head>
<body >
<input type="button" value="删除" class="btn ml50" id="remove">
<div class="wrap-dialog hide">
    <div class="dialog">
        <div class="dialog-header">
            <span class="dialog-title">删除确认</span>
        </div>
        <div class="dialog-body">
            <span class="dialog-message">你确认删除此条信息？</span>
        </div>

        <div class="dialog-footer">
            <input type="button" class="btn" id="confirm" value="确认" />
            <input type="button" class="btn ml50" id="cancel" value="取消" />
        </div>
    </div>
</div>
</body>

<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        console.log("jquery ...");
        $('#remove').click(function(){
            var message = "你确认删除此条信息？？";
            dialogBox(message,
                function () {
                    console.log("confirmed");
                    // do something
                },

                function(){
                    console.log("canceled");
                    // do something
                }
            );
        });
    });

    function dialogBox(message, yesCallback, noCallback){
        if(message){
            $('.dialog-message').html(message);
        }

        // 显示遮罩和对话框
        $('.wrap-dialog').removeClass("hide");

        // 确定按钮
        $('#confirm').click(function(){
            $('.wrap-dialog').addClass("hide");
            yesCallback();
        });

        // 取消按钮
        $('#cancel').click(function(){
            $('.wrap-dialog').addClass("hide");
            noCallback();
        });
    }
</script>
</html>