<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>拉伸效果</title>
<style>
.mask50 {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
background: rgba(0, 0, 0, .5);
overflow: auto;
}
.js-alertFn {
width: 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;
width: 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;
width: 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>
