본문 바로가기

먹고살거/JS(Jquery)

레이어 뒷단 반투명하게 막기

레이어가 표준에 어긋나긴하지만 구현하는 방법은 알아야될것같다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<title></title>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<style type="text/css"> 
* { margin:0; padding:0}
body { margin:0; padding:0; width:100%; height:100%;}
/* 레이어 뒷단 반투명하게 막기 */
#alphaLayer { z-index:400; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; -moz-opacity:0.7;}
.alphaLayer { width:100%; height:100% !important; }
#picLayer { position:absolute; background:#fff; z-index:9999;}
</style>
</head>
<body onresize="bodyWidth();">
<div id="wrap">
<div onclick="layerShowFunc(this.href); return false;">모듈팝업버튼</div>
 
<!-- 레이어팝업영역 -->
<div id="alphaLayer" style="display:none;">&nbsp;</div>
<div id="picLayer" style="display:none;">
<div class="picContent">
<p>레이어내용입니다.</p>
</div>
<p class="btnClose"><a href="#" onclick="layerHideFunc(); return false;">닫기</a></p>
</div>
<!-- 레이어팝업영역 -->
</div>
</body>
</html>