[HTML] 팝업 모달창 div 띄우기

■ HTML 팝업 모달창 div 띄우기

---

■ 사용법

> HTML

<div id="popupDiv" style="display:inline-block; position:absolute; top:100px; left:100px; z-index:999999;"> 
  <div class="contents"> 
    <img src="이미지 경로"> 
  </div> 
  <div class="footer-td" style="background:#000;height:20px;"> 
    <a href="javascript:clkBtn()" style="position:absolute;right:5px;color:#fff;">[닫기]</a> 
  </div> 
</div>

닫기 클릭 시 하기와 같이 자바스크립트(JavaScript) 또는 제이쿼리(JQuery)로 팝업창(div) 닫는 기능 구현가능

 

> JavaScript

<script type="text/javascript"> 
  // 닫기 클릭 시 
  function clkBtn(){ 
    var popupDiv = document.getElementById('popupDiv');
    popupDiv.style.display = 'none';
  }
</script>

> JQuery

<script type="text/javascript"> 
  // 닫기 클릭 시 
  function clkBtn(){ 
    $("#popupDiv").css({ 'display' : 'none' });
  }
</script>