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