标签：element div onclick doctype sem aci top 创建 tee
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹窗</title>
<style>
.dialog {
background: grey;
width: 150px;
height: 30px;
font-size: 25px;
font-family: "楷体";
border-radius: 5px;
user-select:none;
}
</style>
</head>
<body>
<div class="dialog" onclick="new Dialog({width:800,height:300})">点击出现弹窗</div>
<script>
var Dialog = (function () {
function DialogInner(options) {
this.options = {
width: 200,
height: 100
};
this.init(options);
}
DialogInner.prototype.extend = function (son, parent) {
for (var attr in parent) {
son[attr] = parent[attr];
}
};
DialogInner.prototype.killMark = function () {
this.closeButton = document.getElementById("closeButton");
var that = this;
this.closeButton.onclick = function () {
document.body.removeChild(that.makeBackground);
document.body.removeChild(that.makeMark)
}
};
DialogInner.prototype.init = function (options) {
this.extend(this.options, options);
this.screenWidth=document.documentElement.clientWidth|| document.body.clientWidth;
this.screenHeight=document.documentElement.clientHeight|| document.body.clientHeight;
this.makeBackground = document.createElement("div");//创建一个全屏遮罩
this.makeBackground.style.position = "absolute";
this.makeBackground.style.top = 0;
this.makeBackground.style.background = "red";
this.makeBackground.style.opacity = 0.6;
this.makeBackground.style.left = 0;
this.makeBackground.style.width = this.screenWidth+"PX";
this.makeBackground.style.height = this.screenHeight+"PX";
this.makeBackground.style.zIndex = 800;
document.body.appendChild(this.makeBackground);
this.makeMark = document.createElement("div");//创建一个在屏幕中央的弹窗
this.makeMark.style.background = "rgba(0,0,0,1)";
this.makeMark.style.zIndex = 1000;
this.makeMark.style.width = this.options.width + "px";
this.makeMark.style.height = this.options.height + "px";
this.makeMark.style.position = "absolute";
this.makeMark.style.top = 0;
this.makeMark.style.right = 0;
this.makeMark.style.bottom = 0;
this.makeMark.style.left = 0;
this.makeMark.style.margin = "auto";
document.body.appendChild(this.makeMark);
this.closeMark = document.createElement("div");
this.closeMark.innerHTML = ‘<div style="position: absolute;right:20px;bottom:20px"><button id="closeButton">关闭弹窗</button></div>‘;
this.makeMark.appendChild(this.closeMark);
this.killMark();
};
return DialogInner;
})();
</script>
</body>
</html>
```
标签：element div onclick doctype sem aci top 创建 tee
原文地址：https://www.cnblogs.com/gushixianqiancheng/p/10967074.html
