一 需求描述及效果图

为了防止误发消息，所以在点击发送后弹出提示框，功能比较简单，所以直接用jq实现的。效果如图，点击按钮后弹出提示框，确认和取消都有自己的回调函数

jQuery设置弹窗的大小 jquery 弹窗_html

二 代码实现

<!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: 100px;
        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(){
        $('#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>

jQuery设置弹窗的大小 jquery 弹窗_弹窗_02