----실행해 보기 시작-------------------------------------------------------------------------
----실행해 보기 끝-------------------------------------------------------------------------
<!DOCTYPE HTML><html>
<head>
<style>
.layer-main {
z-index:2000;
display:none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
.layer-main:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -.25em;
}
.layer-popup {
display: inline-block;
vertical-align: middle;
background-color: #fff;
border: 1px solid #3571B5;
z-index: 10;
font-family:Tahoma;
}
.layer-popup .layer-container {
padding-bottom: 20px;
}
.layer-title {
overflow:hidden;
margin:0px;
padding:0px;
background-color: #474747;
height:36px;
}
.layerTitle {
float:left;
line-height:36px;
margin:0px;
padding:0px 0px 0px 10px;
font-size:15px;
color:#ffffff;
}
.layer-close {
float:right;
margin:0px;
padding:8px 10px;
cursor:pointer;
}
.layerConts {
clear:both;
margin-top:10px;
padding: 10px;
}
</style>
<script type="text/javascript">
function openlayer() {
document.getElementsByClassName("layer-main")[0].style.display = "block";
}
function closelayer() {
document.getElementsByClassName("layer-main")[0].style.display = "none";
}
function actionlayer() {
alert("actionlayer");
}
</script>
</head>
<body>
<div>ccccc<br>ccccc<br>ccccc<br>ccccc<br>ccccc<br>ccccc<br>ccccc<br>ccccc<br></div>
<div onclick="openlayer()">show click here</div>
<div class="layer-main">
<div class="layer-popup">
<div class="layer-container">
<div class="layer-conts">
<div class="layer-title">
<div class="layerTitle">
타이틀................................
</div>
<div class="layer-close" onclick="closelayer()">
<img src="/images/kr/cm/btn_popupClose.gif" alt="" />
</div>
</div>
<div class="layerConts">
레이어컨텐트<br>레이어컨텐트<br>레이어컨텐트<br>레이어컨텐트<br>레이어컨텐트<br>
</div>
<div>
<a href="javascript:actionlayer();" class="">
저장
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
댓글 없음:
댓글 쓰기