JS模态框 简单案例

演示:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	*{
		margin: 0;
		padding: 0;
	}
	a{
		display: block;
		color: #090;
		width: 80px;
		height: 32px;
		border:1px solid #090;
		text-align: center;
		text-decoration: none;
		line-height: 32px;
		margin: 50px auto;
	}
	a:hover{
		background:#090;
		color: #fff;
	}
	#modal-overlay{
		visibility: hidden;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background:rgba(0,0,0,.5);
		z-index: 999;
		text-align: center;
	}
	.modal-data{
		width: 300px;
		margin: 100px auto;
		background:#fff;
		border:1px solid #090;
		text-align: center;
	}
	p{
		width: 80px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		margin: 20px auto;
	}
  </style>
 </head>
 <body>
	<a href="javascript:;" onclick='overlay()'>模态框</a>
	<div id="modal-overlay">
		<div class="modal-data">
			<p>模态框</p>
			<a href="javascript:;" onclick='overlay()'>关闭</a>
		</div>
	</div>
	<script>
		function overlay(){
			var el = document.getElementById("modal-overlay");
			el.style.visibility = (el.style.visibility == "visible")?"hidden":"visible";
		}
	</script>
 </body>
</html>

 

posted @ 2017-04-19 13:29  东张西旺  阅读(355)  评论(0编辑  收藏  举报