Front modal box assembly

js is an object-oriented function, but it is different from the object-oriented function of c + +. When the object-oriented function of c + +, it is realized by creating a new class and then constructing a constructor, while js is realized by prototype. In learning object-oriented, I found a big guy to write a template for me. It's the realization of modal box. It took me a day to sort out the ideas (well, I'm learning slag). I'd like to share it with you

<!DOCTYPE html>
<html>

<head>
    <title>dialog procedure </title>
    <meta charset="utf-8">
    <style>
    .js-hide {
        display: none !important;
    }

    .dialog-mask {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, .3)
    }

    .dialog-con {
        width: 50%;
        max-height: 60%;
        padding: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
    }

    .dialog-close {
        position: absolute;
        right: 20px;
        top: 20px;
    }
    </style>
</head>

<body>
    <script>
    //Define a function that assigns elements of an object that are not undefined to another object and returns another object
    function mixin(target, op) {
        for (var i in op) {
            if (op[i] != undefined) {
                target[i] = op[i];
            }
        }
        return target;
    }
    //Check whether a node contains classname. First, save the classname in the array with a space in the regular expression
    function hasClass(el, className) {
        if (el && el.className !== void 0) {
            var classList = el.className.split(/\s+/);
            if (classList.indexOf(className) > -1) {
                return true;
            } else {
                return false;
            }
        } else {
            return false;
        }
    }
    // Put the classname in the array with spaces as the interval, find the location through indexof, and then delete the class through splice
    function removeClass(el, className) {
        if (hasClass(el, className)) {
            var classList = el.className.split(/\s+/);
            var deleteIndex = classList.indexOf(className);
            classList.splice(deleteIndex, 1);
            el.className = classList.join(' ');
        }
    }
//Add a class
    function addClass(el, className) {
        if (!hasClass(el, className)) {
            el.className = el.className + ' ' + className;
        }
    }

    function Dialog(params) {
        if (!(this instanceof Dialog)) {
            return new Dialog(params);
        }
        var defaultConfig = {
            maskClose: true,
            buttons: [{
                name: 'Determine',
                needClose: true,
                needDestory: true,
                callback: function() {
                    console.log(1);
                }
            }],
            title: 'title',
            content: 'content',
            needClose: true,
            autoShow: true,
            hideDestory: true
        }
        this.config = mixin(defaultConfig, params);
        this.init();
    }
    Dialog.prototype.init = function() {
        this.render();
        if (this.config.needClose) {
            this.$close = this.$el.getElementsByClassName('dialog-close')[0];
        }
        this.bindEvent();
        if (this.config.autoShow) {
            this.show();
        }
    }
    Dialog.prototype.bindEvent = function() {
        var me = this;
        if (me.$close) {
            me.$close.addEventListener('click', function(e) {
                me.hide();
            })
        }
        if ((me.config.buttons && me.config.buttons.length) || me.config.maskClose) {
            me.$el.addEventListener('click', function(e) {
                var target = e.target;
                if (hasClass(target, 'dialog-btn')) {
                    var index = target.getAttribute('data-index');
                    if (me.config.buttons[index] && me.config.buttons[index].needClose) {
                        me.hide();
                    }
                    if (me.config.buttons[index] && me.config.buttons[index].needDestory) {
                        me.destory();
                    }
                    if (me.config.buttons[index] && me.config.buttons[index].callback && (typeof me.config.buttons[index].callback == 'function')) {
                        me.config.buttons[index].callback();
                    }
                }

                if (me.config.maskClose && hasClass(target, 'dialog-mask')) {
                    me.hide();
                }
            })
        }
    }
    Dialog.prototype.render = function() {
        this.$el = document.createElement('div');
        this.$el.className = 'js-hide';
        this.$el.innerHTML = this.getHTML();
        document.body.appendChild(this.$el);
    }
    Dialog.prototype.getHTML = function() {
        return '<div class="dialog-mask">' +
            '<div class="dialog-con">' +
            (this.config.needClose ? '<div class="dialog-close">x</div>' : '') +
            '<div class="dialog-title">' + this.config.title + '</div>' +
            '<div class="dialog-content">' + this.config.content + '</div>' +
            '<div class="dialog-btns">' + this.config.buttons.map(function(item, index) {
                return '<button class="dialog-btn" data-index="' + index + '">' + item.name + '</button>'
            }).join('') + '</div>'
        '</div>' +
        '</div>'
    }
    Dialog.prototype.show = function() {
        if (this.$el) {
            removeClass(this.$el, 'js-hide');
        }
    }
    Dialog.prototype.destory = function() {
        this.$el.remove();
    }
    Dialog.prototype.hide = function() {
        addClass(this.$el, 'js-hide');
        if (this.config.hideDestory) {
            this.destory();
        }
    }
    // var d = Dialog();
    function Alert(msg) {
        return Dialog({
            title: '',
            content: msg,
            buttons: [{
                name: 'Determine',
                needClose: true,
                needDestory: true
            }]
        })
    }
    Alert('test');
    </script>
</body>

</html>



The function of this modal box is

1. Write a string in the Alert function, which will appear at the test position

2. Click OK. The modal box will be hidden

3. Click x or the outside of the modal box to delete the div node of the modal box.

Well, for specific questions, you can email 1249417038@qq.com

Posted on Tue, 05 May 2020 01:17:04 -0400 by evlive