<script type="text/javascript">
function ViewLayer(){
document.getElementById("Pop_c").style.display='inline'
}
</script>
<!-- 버튼버튼 -->
<a href="javascript:ViewLayer();">ㅇㅇㅇㅇ</a>
<!-- 클릭시 보여질 레이어 -->
<div id="Pop_c" style="position:absolute; left:0; top:50px; z-index:1;display:none; width:950px; height:207px;">
보여질 내용
</div>
---------------------------------------------------------------------------------------------------------------------------
클릭 시 보이고 안보이고 할때는
<style>
#layer {position:relative;width:500px;background-color:#fff;border:1px #c0c1bf solid;padding:0 5px 0 5px;z-index:1000;display:none;}
#layer ul li {padding:7px 4px;color:#929292;font-size:11px;border-bottom:1px #e5e5e5 solid;}
#layer ul li a {color:#929292;}
#layer ul li a:hover {color:#484848;}
#layer .close {position:absolute;top:5px;right:5px;}
</style>
<div><a href="#" OnClick="layer.style.display='block'" >관련Url</a></div>
<!-- 레이어 -->
<div id="layer">
<div class="close"><a href="#" OnClick="layer.style.display='none'">닫기</a></div>
<ul>
<li><a href="#">관련url</a></li>
<li><a href="#">관련url</a></li>
<li><a href="http://www.daum.net/">관련url</a></li>
</ul>
</div>
<div style="position:relative;top:10px;">ddddddddddd</div>
'CSS HTML5 > 퍼블리싱 팁' 카테고리의 다른 글
윤앤정 활용소스 (0) | 2016.11.09 |
---|---|
카테고리 슬라이딩 (0) | 2016.11.09 |
수직 슬라이딩 메뉴 (0) | 2016.11.09 |
유동성 버튼 만들기 (0) | 2016.11.09 |
가로로 나열되며 l 로 나뉘는 메뉴 (0) | 2016.11.09 |