<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>弹窗组件</title> <style> * { margin: 0; padding: 0; } button { margin: 10px; } .myAlert { position: absolute; border: 1px solid #ccc; z-index: 2; background: #fff; } .title { background: blue; color: #fff; padding: 10px; overflow: hidden; } .title .close { float: right; border: 2px silid #000; cursor: pointer; } .myAlert .content { padding: 10px; } #mark { position: absolute; background: rgba(0,0,0,.5); z-index: 1; top: 0; left: 0; } </style> </head> <body> <button id="btn1">居中弹窗</button> <button id="btn2">右下角弹窗</button> <button id="btn3">遮罩弹窗</button> <div id="mark"></div> <!-- <div class="myAlert"> <div class="title"><span>我是标题</span><span class="close">X</span></div> <div class="content">我是内容我是内容我是内容我是内容我是内容</div> </div> --> </body> <script> (function (global){ function MyAlert(json){ this.setting = { ele : this, 300, height: 400, closeBtn : true, content : '我是内容', title: '默认', dir : 'center' }; extend(this.setting,json); this.alertEle = null; this.init(); } MyAlert.prototype.blog = {}; MyAlert.prototype.init = function (){ this.blog[this.setting.iNow] == undefined ? this.blog[this.setting.iNow] = true:null; if( this.blog[this.setting.iNow] ){ this.creatAlert(); this.setting.closeBtn ? this.closeFn() : null; if(this.setting.mark){ this.setMark(); } this.blog[this.setting.iNow] = false; } }; MyAlert.prototype.creatAlert = function (){ this.alertEle = document.createElement('div'), alertEleHtml = ''; this.alertEle.className = 'myAlert'; alertEleHtml += '<div class="title">' alertEleHtml += '<span>'+ this.setting.title +'</span><span class="close">X</span>'; alertEleHtml += '</div><div class="content">'+this.setting.content+'</div>'; this.alertEle.innerHTML += alertEleHtml document.body.appendChild(this.alertEle); this.setdata(); }; MyAlert.prototype.setdata = function (){ this.alertEle.style.width = this.setting.width + 'px'; this.alertEle.style.height = this.setting.height + 'px'; switch (this.setting.dir){ case 'center': this.alertEle.style.left = (document.documentElement.clientWidth - this.setting.width)/2 + 'px'; this.alertEle.style.top = (document.documentElement.clientHeight - this.setting.height)/2 + 'px'; break; case 'right': this.alertEle.style.right = 0 + 'px'; this.alertEle.style.bottom = 0 + 'px'; break; } } MyAlert.prototype.closeFn = function (){ var This = this; this.alertEle.getElementsByClassName('close')[0].onclick = function (){ document.body.removeChild(This.alertEle); if(This.markEle){ document.body.removeChild(This.markEle); } This.blog[This.setting.iNow] = true; } }; MyAlert.prototype.setMark = function (){ this.markEle = document.createElement(this.markEle); var markEle = document.body.appendChild(this.markEle); markEle.id = 'mark'; markEle.style.width = document.documentElement.clientWidth + 'px'; markEle.style.height = document.documentElement.clientHeight + 'px'; } function extend(obj1,obj2){ for(var attr in obj2){ obj1[attr] = obj2[attr]; } } global.MyAlert = MyAlert; })(this) </script> <script> var aBtn = document.getElementsByTagName('button'); aBtn[0].onclick = function (){ var alert1 = new MyAlert({ ele : this, 300, height: 400, closeBtn : true, content : '我是内容，哈哈哈哈哈', title: '登陆', dir : 'center', iNow : 0 }); } aBtn[1].onclick = function (){ var alert1 = new MyAlert({ ele : this, 200, height: 100, closeBtn : true, content : '公告内容', title: '公告', dir : 'right', iNow : 1 }); } aBtn[2].onclick = function (){ var alert1 = new MyAlert({ ele : this, 300, height: 400, closeBtn : true, content : '遮罩', title: '公告', dir : 'right', iNow : 2, mark : true }); } </script> </html>