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>' + '<div>' + (this.config.needClose ? '<div>x</div>' : '') + '<div>' + this.config.title + '</div>' + '<div>' + this.config.content + '</div>' + '<div>' + this.config.buttons.map(function(item, index) { return '<button 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 [email protected]