该怎么解决?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
/*弹出框属性设置*/
#dialog {
position: fixed;
width: 300px;
height: 150px;
top: 35%;
left: 10%;
visibility: hidden;
background-color: white;
z-index: 100;
}
.title {
font-size: 24px;
height: 40px;
color: white;
background: black;
padding-top: 10px;
padding-left: 5px;
}
#zero,
#one,
#two {
height: 20px;
padding-left: 5px;
}
</style>
</head>
<body>
<div class="mui-content">
<!--弹出框内容-->
<div id="dialog">
<p class="title">設置信息</p>
<div id="zero">0</div>
<hr />
<div id="one">1</div>
<hr />
<div id="two">2</div>
</div>
<!--按钮-->
<button type="button" class="mui-btn mui-btn-blue" onclick="show()">弹出对话框</button>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
});
function show() {
new ShowDiv();
}
function ShowDiv() {
var _this = this;
this.dialog = document.getElementById("dialog");
this.newMask = document.createElement("div");
//遮罩层，用来屏蔽灰掉背部界面
this.dialog.style.visibility = "visible";
// 创建弹出层 遮罩层 等
if(!document.getElementById("mask") && 1) {
//mask div
this.newMask.id = "mask";
this.newMask.style.position = "absolute";
this.newMask.style.zIndex = "1";
this.newMask.style.width = "100%";
this.newMask.style.height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) + 100 + "px";
this.newMask.style.top = "0px";
this.newMask.style.left = "0px";
this.newMask.style.background = "gray";
this.newMask.style.filter = "alpha(opacity=80)";
this.newMask.style.opacity = "0.8";
document.body.appendChild(this.newMask);
}
_this.mask = document.getElementById("mask");
_this.mask.style.visibility = "visible";
//TODO:有bug,点击后会反复打印
var zero = document.getElementById("zero");
var one = document.getElementById("one");
var two = document.getElementById("two");
zero.addEventListener('tap', function() {
mui.toast("点击了0");
_this.CloseDiv(this);
});
one.addEventListener('tap', function() {
mui.toast("点击了1");
_this.CloseDiv(this);
});
two.addEventListener('tap', function() {
mui.toast("点击了2");
_this.CloseDiv(this);
});
}
//点击取消按钮关闭模态框
ShowDiv.prototype.CloseDiv = function() {
this.dialog.style.visibility = "hidden";
this.mask.style.visibility = "hidden";
}
</script>
</body>
</html>
Salazar (作者)
谢谢!
2017-07-06 14:21