自定义消息提示框

Posted 2021-01-16 donlyluik
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义消息提示框相关的知识，希望对你有一定的参考价值。
使用原生javascript简单封装的一个消息提示模态框，如果谁有更好的方式可以分享，谢谢！
<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* 弹窗message-dialog样式开始 */
        
        a {
            text-decoration: none;
        }
        
        .message-dialog {
            font-size: 1rem;
            position: relative;
        }
        /* 遮罩样式 */
        
        .message-dialog-conver {
            width: 100%;
            height: 100%;
            z-index: 100;
            background: rgba(0, 0, 0, 0.3);
            position: fixed;
            top: 0;
            left: 0;
            opacity: 0.3;
            text-align: end;
        }
        /* 主体样式 */
        
        .message-dialog-main {
            position: fixed;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            top: 50%;
            z-index: 200;
            width: 100%;
            left: 100%;
            -webkit-transform: translate(-100%, -100%);
            -moz-transform: translate(-100%, -100%);
            -ms-transform: translate(-100%, -100%);
            -o-transform: translate(-100%, -100%);
            transform: translate(-100%, -100%);
        }
        /* 标题样式 */
        
        .message-dialog-header {
            display: flex;
            justify-content: center;
            align-content: center;
            text-align: center;
            border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 255);
            width: 86%;
            height: 2rem;
            line-height: 2rem;
            border-top-left-radius: 0.6rem;
            border-top-right-radius: 0.6rem;
        }
        /* 内容样式 */
        
        .message-dialog-content {
            display: flex;
            justify-content: center;
            align-content: center;
            text-align: center;
            width: 86%;
            background: rgba(255, 255, 255, 255);
            padding: 0.5rem 0;
            border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3)
        }
        /* 底部样式 */
        
        .message-dialog-footer {
            width: 86%;
            height: 2.5rem;
        }
        
        .message-dialog-btn {
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 255);
            border-bottom-left-radius: 0.6rem;
            border-bottom-right-radius: 0.6rem;
            border-top: 0.01rem solid #d5d6d7;
            display: flex;
            justify-content: center;
            text-align: center;
            align-content: center;
            align-items: center;
        }
        
        .message-dialog-sure,
        .message-dialog-cancel {
            display: block;
            width: 10%;
            text-align: center;
            cursor: pointer;
            height: 2rem;
            line-height: 2rem;
            border-radius: 0.3rem;
            margin: 0 1rem;
            color: #ffff;
            border: none;
            letter-spacing: .6px;
            background-color: #d6d6d6;
        }
        
        .message-dialog-sure {
            color: #212122;
            border: none;
            background-color: #449d44;
        }
        
        .message-dialog-close {
            cursor: pointer;
            color: #347d4a;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
        }
    </style>
</head>

<body>
    <button type="button" onclick="show()">弹出</button>
    <!-- <div class="message-dialog">
        <div class="message-dialog-conver">遮罩</div>
        <div class="message-dialog-main">
            <div class="message-dialog-header">标题</div>
            <div class="message-dialog-content">内容</div>
            <div class="message-dialog-footer">
                <div class="message-dialog-btn">
                    <a href="#">关闭</a>
                    <a>关闭</a>
                </div>
            </div>
        </div>
    </div> -->
    <div id="message"></div>
    <script>
        var messageDialog = {
            showMessage: function(options, autoHide) {
                this.timers = [];
                this.options = options || {};
                this.autoHide = autoHide || false;
                var isShow = this.options.isShow || false;
                var width = this.options.width || 86;
                var topDistance = this.options.topDistance || 50;
                var leftDistance = this.options.leftDistance || 93;
                var btn_width = this.options.btnWidth || 10;
                var sure = this.options.isSure || false;
                var html = ‘<div class="message-dialog-conver"></div>                                    <div class="message-dialog-main">                                        <div class="message-dialog-header">‘ + this.options.title + ‘</div>                                        <div class="message-dialog-content">‘ + this.options.content + ‘</div>                                        <div class="message-dialog-footer">                                                <div class="message-dialog-btn">                                                    <!--<a class="message-dialog-sure">确定</a>-->                                                    <!--<a class="message-dialog-cancel">取消</a>-->                                                </div>                                        </div>                                    </div>‘;
                //1.0 创建元素
                var element = document.createElement(‘div‘);
                element.setAttribute(‘class‘, "message-dialog");
                //2.0 插入元素
                element.innerHTML = html;
                //2.1 设置弹出框的大小
                element.querySelector(".message-dialog-main").style.width = width + ‘%‘;
                element.querySelector(".message-dialog-main").style.top = topDistance + ‘%‘;
                element.querySelector(".message-dialog-main").style.left = leftDistance + ‘%‘;

                //2.2 是否需要插入确认或关闭按钮
                if (sure) {
                    var sureElement = document.createElement(‘a‘);
                    sureElement.setAttribute(‘class‘, ‘message-dialog-sure‘);
                    // sureElement.setAttribute(‘href‘, ‘#‘);
                    sureElement.innerHTML = ‘确定‘;
                    element.querySelector(".message-dialog-btn").appendChild(sureElement);
                    var cancelElement = document.createElement(‘a‘);
                    cancelElement.setAttribute(‘class‘, ‘message-dialog-cancel‘);
                    cancelElement.innerHTML = ‘取消‘;
                    element.querySelector(".message-dialog-btn").appendChild(cancelElement);
                } else {
                    var closeElment = document.createElement(‘a‘);
                    closeElment.setAttribute(‘class‘, ‘message-dialog-close‘);
                    closeElment.innerHTML = ‘关闭‘;
                    element.querySelector(".message-dialog-btn").appendChild(closeElment);
                }
                //2.3 设置按钮的长度
                var array = element.querySelectorAll(".message-dialog-btn a");
                for (var key in array) {
                    if (!array.hasOwnProperty(key)) {
                        continue;
                    }
                    var item = array[key];
                    item.style.width = btn_width + ‘%‘;
                }

                //3.0 插入到页面并显示
                if (this.options.el) {
                    var ele = document.getElementById(this.options.el);
                    if (ele) {
                        document.getElementById(this.options.el).appendChild(element);
                    } else {
                        document.getElementsByTagName("body")[0].appendChild(element);
                    }
                } else {
                    document.getElementsByTagName("body")[0].appendChild(element);
                }
                //4.0 是否显示
                if (!isShow) {
                    element.style.display = "none";
                }
                //5.0 绑定事件
                if (element.querySelector(‘.message-dialog-sure‘) && element.querySelector(‘.message-dialog-cancel‘)) {
                    element.querySelector(‘.message-dialog-sure‘).onclick = element.querySelector(‘.message-dialog-cancel‘).onclick = this.enventsFunc.bind("", this, element);
                } else {
                    element.querySelector(‘.message-dialog-close‘).onclick = this.enventsFunc.bind("", this, element);
                }
                return this;
            },
            show: function() {
                this.cleartimers();
                this.options.isShow = true;
                document.querySelector(‘.message-dialog‘).style.display = ‘block‘;
                if (this.autoHide) {
                    var t = setTimeout(() => {
                        this.hide();
                    }, this.options.timeout || 3000);
                    this.timers.push(t);
                }
                return this;
            },
            hide: function() {
                this.cleartimers();
                this.options.isShow = false;
                document.querySelector(‘.message-dialog‘).style.display = ‘none‘;
                if (this.options.el) {
                    var ele = document.getElementById(this.options.el);
                    if (ele) {
                        document.getElementById(this.options.el).removeChild(document.querySelector(‘.message-dialog‘));
                    } else {
                        document.getElementsByTagName("body")[0].removeChild(document.querySelector(‘.message-dialog‘));
                    }
                } else {
                    document.getElementsByTagName("body")[0].removeChild(document.querySelector(‘.message-dialog‘));
                }
            },
            enventsFunc: function(e, doc, target) {
                var thisEvent = target.target;
                if (thisEvent.classList.contains("message-dialog-sure")) {
                    e.options.confirm();
                }
                if (thisEvent.classList.contains("message-dialog-cancel")) {
                    e.options.cancel();
                }
                e.hide();
                return false;
            },
            cleartimers: function() {
                if (this.timers && this.timers.length > 0) {
                    for (var index = 0; index < this.timers.length; index++) {
                        var timer = this.timers[index];
                        if (timer) {
                            window.clearTimeout(timer);
                        }
                    }
                }
            }
        };

        function show() {
            messageDialog.showMessage({
                el: "message",
                title: "信息提示",
                content: "错误消息",
                btnWidth: 30,
                width: 30,
                topDistance: 50,
                leftDistance: 65,
                isSure: false,
                timeout: 3000,
                confirm: function() {
                    alert("1234");
                },
                cancel: function() {},

            }, false).show();
        }
    </script>


</body>

</html>
以上是关于自定义消息提示框的主要内容，如果未能解决你的问题，请参考以下文章
通过自定义window来实现提示框效果
请问一下wpf能否实现消息提示框就像qq消息的那种右下角弹出？能的话请贴出代码
超酷消息警告框插件（SweetAlert）
AJAX调用完成后的消息提示框
SpringCloud系列十一：SpringCloudStream（SpringCloudStream 简介创建消息生产者创建消息消费者自定义消息通道分组与持久化设置 RoutingKey）(代码片段
Vue基础：使用Vue.extend()实现自定义确认框