JavaScript页面交互效果-窗口提示

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>qdabc.cn</title>
		<style type="text/css">
			#dialog{
				background-color:#D2ADAD;
				width:400px;
				height:400px;
				z-index:999;
				display:none;
				position:relative;
			}
			#close{
				float: right;
				width: 10px;
				height: 10px;
				padding: 5px 10px 0px 0px;
				cursor:pointer;
			}
			#dialogContent{
				text-align:center;
				margin:20px;
			}
		</style>
	</head>
	<body>
		<div>
			<button id="click">提交</button>
		</div>
		<div id="dialog" >
			<span>弹窗</span><span id="close">X</span>
			<div id="dialogContent"> 
				内容
			</div>
		</div>
		<script type="text/javascript">
			document.getElementById("click").onclick = function(evt){
				document.getElementById("dialog").style.display = 'block';
				document.getElementById("dialog").style.top = (document.documentElement.clientHeight-400)/2 +'px';
				document.getElementById("dialog").style.left = (document.documentElement.clientWidth-400)/2 +'px';
			}
			document.getElementById("close").onclick = function(evt){
				document.getElementById("dialog").style.display = 'none';
			}
		</script>
	</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » JavaScript页面交互效果-窗口提示

赞 (2)
分享到:更多 ()

发表评论 0