CSS HTML5/퍼블리싱 팁

버튼 클릭 시 레이어 팝업

웹디자이너 Kang Ji Yeon 2016. 11. 9. 20:35
반응형


<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