JQuery实现简单的弹窗提醒

最新推荐文章于 2024-04-20 14:57:38 发布

柚稚zr

最新推荐文章于 2024-04-20 14:57:38 发布

阅读量5.6k

点赞数 3

分类专栏：前端文章标签：弹窗提示框

本文链接：https://blog.csdn.net/bulabulahei/article/details/114938067

版权

前端专栏收录该内容

46 篇文章 8 订阅

订阅专栏

一需求描述及效果图

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

二代码实现

<!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>

在这里插入图片描述

柚稚zr

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现简单的弹窗提醒

一需求描述及效果图为了防止误发消息，所以在点击发送后弹出提示框，功能比较简单，所以直接用jq实现的。效果如图，点击按钮后弹出提示框，确认和取消都有自己的回调函数二代码实现<!DOCTYPE html><head><meta charset="utf-8"><title>js confirm弹出框自定义样式</title><style> html,body { margin: 0;
复制链接

扫一扫