代码:
<!doctype html>
<html>
<!--
作者:roybill@163.com
时间:2017-07-03
描述:自定义dialog
-->
<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;
margin: 10px;
}
input{
width: 100%;
height: 30px;
padding-left: 5px;
}
font {
float: right;
font-size: 20px;
padding-top: 13px;
margin-right: 6%;
color:#20B2AA;
}
</style>
</head>
<body>
<div class="mui-content">
<!--弹出框内容-->
<div id="dialog">
<p class="title">設置信息</p>
<input id="address" placeholder="請輸入服務器地址" /><br />
<input id="port" placeholder="請輸入服務器端口" />
<font id="confirmBtn">確認</font>
<font id="cancleBtn">取消</font>
</div>
<!--按钮-->
<button type="button" class="mui-btn mui-btn-blue" οnclick="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.cancleBtnn = document.getElementById("cancleBtn");
//对应div的取消按钮的操作
this.confirmBtn = document.getElementById("confirmBtn");
this.newMask = document.createElement("div");
//遮罩层,用来屏蔽灰掉背部界面
this.dialog.style.visibility = "visible";
this.cancleBtnn.onclick = function() {
// mui.toast("取消");
_this.CloseDiv(this);
}
//确认按钮
this.confirmBtn.onclick = function() {
var address = document.getElementById("address").value;
var port = document.getElementById("port").value;
mui.toast("确定"+"address="+address+",port="+port);
_this.CloseDiv(this);
}
// 创建弹出层 遮罩层 等
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";
}
//点击取消按钮关闭模态框
ShowDiv.prototype.CloseDiv = function() {
this.dialog.style.visibility = "hidden";
this.mask.style.visibility = "hidden";
}
</script>
</body>
</html>
以上实例如有不足请指出.