码迷,mamicode.com
首页 > 其他好文 > 详细

自定义消息提示框

时间:2018-10-31 20:03:22      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:Fix   list   fir   element   amp   底部   append   isp   length   

使用原生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>

 

自定义消息提示框

标签:Fix   list   fir   element   amp   底部   append   isp   length   

原文地址:https://www.cnblogs.com/donlyluik/p/9884959.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!