<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>拉伸效果</title> <style> .mask50 { 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10000; background: rgba(0, 0, 0, .5); overflow: auto; } .js-alertFn { 9.36rem; position: absolute; z-index: 11111; background: #ffffff; left: 50%; top: 50%; margin-left: -4.68rem; -webkit-border-radius: .2rem; -moz-border-radius: .2rem; border-radius: .2rem; overflow: hidden; } .js-alertFn table { border-collapse: collapse; 100%; border: .01rem solid #fff; margin-left: -1px; height: 100px } .js-alertFn table tr td { border-top: 1px solid #d4d4d4; border-left: 1px solid #d4d4d4; text-align: center; padding: .2rem .4rem; line-height: .8rem; font-size: .5rem; color: #333; padding: 1rem .3rem; } .js-alertFn table tr:last-child td { height: 1rem; 50%; padding: .3rem !important; } </style> </head> <body> <button onclick="selfAlert({})">确定</button> </body> </html> <script type="text/javascript"> !function(a){function b(){ var b=g.getBoundingClientRect().width;a.rem=b/10.8,g.style.fontSize=a.rem+"px"}var g=a.document.documentElement,e;a.addEventListener("resize",function(){clearTimeout(e),e=setTimeout(b,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(e),e=setTimeout(b,300))},!1),b()}(window); //弹出框方法 function alertFn(jn) { this.json = { msg : jn.msg || "系统错误", btntxt : jn.btntxt || [ '确定', '取消' ], type : jn.type || 2, sure : jn.sure, cancell : jn.cancell } this.init(); this.DOMlayout(); } alertFn.prototype.init = function() { var mask = document.querySelector("#mask"); if (mask) { mask.parentNode.removeChild(mask); } } alertFn.prototype.DOMlayout = function() { var self = this; var mask = document.createElement("div"); mask.className = "mask50"; mask.setAttribute("id", "mask") if (this.json.type === 1) { var alertBox = '<div class="js-alertFn"><table><tr>'; alertBox += '<td colspan="2">' + this.json.msg + '</td></tr>'; alertBox += '<tr><td id="cancel">' + this.json.btntxt[1] + '</td><td id="sure">' + this.json.btntxt[0] + '</td></tr>'; alertBox += '</table></div>'; } else { var alertBox = '<div class="js-alertFn"><table><tr>'; alertBox += '<td>' + this.json.msg + '</td></tr>'; alertBox += '<tr><td id="sure">' + this.json.btntxt[0] + '</td></tr>'; alertBox += '</table></div>'; } mask.innerHTML = alertBox; document.body.appendChild(mask); this.vm(); document.querySelector("#sure").onclick = function() { self.sureFn() } var canBtn = document.querySelector("#cancel"); if (canBtn) { canBtn.onclick = function() { self.cancellFn() } } } alertFn.prototype.vm = function() { var box = document.querySelector(".js-alertFn"); var h = box.offsetHeight; var mh = document.querySelector("#mask").offsetHeight; box.style.top = (mh - h) / 2 + "px"; } alertFn.prototype.sureFn = function() { this.init(); this.json.sure && this.json.sure(); } alertFn.prototype.cancellFn = function() { this.init(); this.json.cancell && this.json.cancell(); } function selfAlert(json) { return new alertFn(json); } </script>