纯js封装弹出窗口的封装代码

function showWindow() { this.rnd = Math.random(); this.obj = null; this.title = ''; this.content = ''; this.scroll = false; this.zindex = 0; this.width = 500; this.top = 0; this.left = 0; this.dimensions = this.calcDimensions(); this.titleColor = 'background:#f0f0f0; color:#7e7975'; this.titleBottomBoder = '1px solid #c2c2c2'; this.scrollColor = '#7e7975'; this.border = '6px solid rgba(181,181,181,0.4);border-radius:5px'; this.bodyColor = 'color:#7e7975;background:#fff'; this.scrollText = 'scroll'; } showWindow.prototype = { isMobile: function () { return navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null; }, show: function (param) { if (typeof param != 'undefined') { this.title = param.title || ''; this.content = param.content || ''; this.scroll = param.scroll || false; this.zindex = param.zindex || 0; this.width = param.width || 500; this.top = param.top || 0; this.left = param.left || 0; this.titleColor = param.titlecolor || 'background:#f0f0f0; color:#7e7975'; this.titleBottomBoder = param.titlebottomboder || '1px solid #c2c2c2'; this.scrollColor = param.scrollcolor || '#7e7975'; this.border = param.border || '6px solid rgba(181,181,181,0.4);border-radius:5px'; this.bodyColor = param.bodycolor || 'color:#7e7975;background:#fff'; this.scrollText = param.scrolltext || 'scroll'; } var divObj = document.createElement("div"); this.obj = divObj; divObj.id = "window_" + this.rnd; if (typeof this.width != "undefined") { width = this.width + ""; if (width.indexOf("%") > -1) { divObjWidth = width; } else { if (parseInt(width) > 0) { divObjWidth = parseFloat(width) + 'px'; } else { divObjWidth = "500px"; } } } if (this.isMobile() == true) { divObjWidth = window.innerWidth + "px"; } divObj.style = "opacity: 0;transition: opacity 0.3s;position:fixed;left:0; right:0; color: #7e7975;box-shadow:0 10px 10px rgba(0,0,0,0.1),10px 10px 10px rgba(0,0,0,0.3);border: " + this.border + ";width:" + divObjWidth + ";z-index:" + this.zindex; divObj.innerHTML = "<div style='display:flex;font-weight:bold; border-bottom:" + this.titleBottomBoder + "; height:40px; line-height:40px; padding:0 10px; cursor:move;" + this.titleColor + ";' id='showwin_title_" + this.rnd + "'><div style='width:80%;overflow:hidden'>" + this.title + "</div><div style=' display:flex;justify-content: end;width:20%;align-items:center'><span style='margin-right:8px;display: inline-block;vertical-align: middle;'><input type='checkbox' id='showwin_scrollchk_" + this.rnd + "' style='cursor:pointer;vertical-align:middle' /><label style='color:#7e7975' for='showwin_scrollchk_" + this.rnd + "'><span style='cursor:pointer; font-weight:normal; margin-left:2px; font-size:11px;color:" + this.scrollColor + "'>" + this.scrollText + "</span></label></span><a style ='height:20px;display:block;width:20px; background:url(data:image/gif;base64,R0lGODlhFAAoANUlAJ2dnZycnAOdz7S0tCS/5w2n1hWv2xu14BOt2q2traOjo6ioqKenp6urqxex3Rmz3hGr2Q+p16SkpKampqqqqrGxsaGhoa6urgmj0wul1J6enhy34R654rKysq+vrwWf0Aeh0aCgoCC75CK95f///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACUALAAAAAAUACgAAAb/wFKJRCwajyThcMBsOp+DJKlDrVqvVWJly+16uUSPeEwuj4mXtHrNVhMTcPg7PqeTGnh8UU/M8ymAgUiBgiQLh4gLRomIRAyPkAxGkZBEE5eYSJiZJBKenkWgRJ+iCqamRKcKqapEFq+wsbKwRCG2t7i5t0Qavb6/wL5EAMTFxsfFUgHLzM3OAUlCSNNFSkPU00okBNzd3t8EUiPj5OXm5EQi6uvs7etEHPHy8/TyRBv4+fr7+UQH///8ARQ4kMSDgweLJCSCcKGDhxCRQIxIwoDFiwaMYLxIBIHHjwiMgPxIBILJk0hOoiQRoWXLIi+JuIxZoGZNIjYL4MxJJIPPK59Ag/4kgqGo0aNIjRIBwbSp06dNiXyYSrWqVapSBGjdyrWrgGjXsB0REgQAOw==)' href='javascript:;' onmousedown='event.cancelBubble = true' onmouseleave='console.log(333);this.style.backgroundPosition=\"0 0\"' onmouseover='console.log(222);this.style.backgroundPosition=\"0 20px\"' id='showwin_close_" + this.rnd + "'></a></div></div>\ <div style='" + this.bodyColor + "; padding: 10px; word-wrap: break-word; word-break: break-all;'>" + this.content + "</div>"; document.body.appendChild(divObj); setTimeout(function(){ divObj.style.opacity = 1; },0) if (this.scroll) { divObj.style.position = "absolute"; document.getElementById( "showwin_scrollchk_" + this.rnd).checked = true; } else { divObj.style.position = "fixed"; } var that = this; document.getElementById("showwin_scrollchk_" + this.rnd).addEventListener('click', function (e) { if (e.target.checked == true) { divObj.style.position = "absolute"; scrollTo(0, 0); } else { divObj.style.position = "fixed"; divObj.style.top = that.calcTop() + "px"; } }, false); document.getElementById("showwin_title_" + this.rnd).addEventListener('mousedown', function (e) { that.onmousedown(e) }, false); document.getElementById("showwin_close_" + this.rnd).addEventListener('click', function (e) { that.close(); }, false); divObj.style.left = this.calcLeft() + "px"; divObj.style.top = this.calcTop() + "px"; return this; }, close: function(){ this.obj.style.opacity = 0; setTimeout(() => { document.body.removeChild(document.getElementById(this.obj.id)) }, 300); }, calcLeft: function() { var _left; if (width.indexOf("%") > -1) { _left = (this.dimensions[0] - (this.dimensions[0] * parseFloat(this.width)) / 100) / 2 + this.left; } else { _left = (this.dimensions[0] - parseFloat(this.width)) / 2 + this.left; } return _left < 0 ? 0 : _left; }, calcTop: function() { var _top; if (!this.scroll) { _top = (this.dimensions[1] - this.obj.offsetHeight) * 0.382; } else { _top = parseFloat(this.getScrollTop() + (document.documentElement.clientHeight - this.obj.offsetHeight)) * 0.382; } return _top < 0 ? 0 : _top; }, getScrollTop: function () { var scroll_top = 0; if (document.documentElement && document.documentElement.scrollTop) { scroll_top = document.documentElement.scrollTop; } else if (document.body) { scroll_top = document.body.scrollTop; } return scroll_top; }, onmousedown: function (ev) { o = (document.getElementById(this.obj.id)); var t = o; var mxy = this.getMouseP(ev); var by = { x: mxy.x - (t.offsetLeft), y: mxy.y - (t.offsetTop) }; var that = this; document.body.onmousemove = function(ev){ var mxyz = that.getMouseP(ev); t.style.left = mxyz.x - by.x + "px"; t.style.top = mxyz.y - by.y + "px"; }; document.body.onmouseup = function(){ this.onmousemove = null; } }, getMouseP: function (e){ e = e || window.event; var m=(e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop }; return m; }, calcDimensions: function () { if (window.innerWidth){ winWidth = window.innerWidth; }else if ((document.body) && (document.body.clientWidth)){ winWidth = document.body.clientWidth; } if (window.innerHei