모달팝업.

2013. 10. 28. 14:22KnowLedge/JAVASCRIPT

 <!-- modal popup script head부분 -->
 <script src="jquery.min.js"></script>
 <script type='text/javascript' src='jquery.simplemodal.js'></script>
 <!-- modal popup script head부분 end-->

/*모달팝업 CSS */
#simplemodal-overlay {background-color:#000;}
#modal_content{display:none;margin:0 auto; background-image:url("../img/popup.png"); background-repeat:repeat; width:559px;height:569px;color:#fff position:fixed; z-index:2;}
 #conten{float:left; width:559px;height:569px;}
 #modal_title{float:left; width:881px;}
 #close{float:left; width:85px;}
 #modal_conten{float:left; padding:0;}

 

<!--모달 팝업 PHP-->
<script type="text/javascript">
$(document).ready(function(){
  $("#open").click(function(){
  $("#modal_content").modal();
  });
  $("#m_close").click(function(){
   $.modal.close();
  });
});
</script>

 

<div id="clickme">
 <a href="#conten" id="open">ddd</a>
</div>
<div id="modal_content">
 <div id="conten">
  <div id="modal_close">
   <div id="m_close" style="width:500px; margin:auto;">close</div>  
  </div>
 </div>
</div>

 

jquery.min.jsjquery.simplemodal.js

 

'KnowLedge > JAVASCRIPT' 카테고리의 다른 글

메뉴 페이지 인식 두번째 방법.  (0) 2013.11.01
tweenmax  (0) 2013.11.01
오전 오후 다른 백그라운드 쓰기~  (0) 2013.02.12
상단 메뉴 고정 및 클릭시 부드럽게 이동  (0) 2013.02.12
플래시 삽입 JS  (0) 2013.02.12