DIV 창 열리기

Tag : HTML5
  
                

 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.black_overlay {
				display: none;
				/* 숨기처리*/
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: #bbbbbb;
				z-index: 1001;
				/* z-index */
				opacity: .80;
				/* opacity 투명처리。*/
			}

			.white_content {
				display: none;
				position: absolute;
				top: 20%;
				left: 50%;
				margin-left: -150px;
				right: 50%;
				width: 300px;
				height: 250px;
				border: 1px solid #bbbbbb;
				border-radius: 5px;
				background-color: white;
				z-index: 1002;
				overflow: auto;
			}

			.button_beautiful {
				width: 60px;
				height: 34px;
				border-width: 0px;
				border-radius: 6px;
				background: #4ECDC4;
				cursor: pointer;
				outline: none;
				color: white;
				font-size: 16px;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<a href="javascript:void(0)" onclick="document.getElementById('1').style.display='block';document.getElementById('fade').style.display='block'">
			클릭1
		</a>
		<a href="javascript:void(0)" onclick="document.getElementById('2').style.display='block';document.getElementById('fade').style.display='block'">
			클릭2
		</a>
		<div id="1" class="white_content">
		    <input type="text" name="">
			<input type="button" value="닫기1" class="button_beautiful" onclick="document.getElementById('1').style.display='none';document.getElementById('fade').style.display='none'" />
		</div>
		<div id="2" class="white_content">
		    <input type="text" name="">
			<input type="button" value="닫기2" class="button_beautiful" onclick="document.getElementById('2').style.display='none';document.getElementById('fade').style.display='none'" />
		</div>
		<div id="fade" class="black_overlay"></div>
	</body>
</html>