HBuilder自定义dialog

最新推荐文章于 2024-07-30 17:10:23 发布

202005021116

最新推荐文章于 2024-07-30 17:10:23 发布

阅读量2.1k

点赞数

分类专栏： HBuilder

本文链接：https://blog.csdn.net/luoyingbiao/article/details/74202072

版权

HBuilder 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码:

<!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>

以上实例如有不足请指出.