안내문구,개인정보약관동의 등 안내성 팝업창을 개발할 때 주로 jquery modal을 이용한다.
Jquery modal이 없었을 때에는 클릭 이벤트당 캐치해서 css값수정, div의 위치변경, backgroud의 블러처리 등을
하나하나 일일이 제어했었었는데 jquery modal .. 확실히 사용하기 간편하고 좋은 듯 하다.
사용방법은 아래와 같다.
사용 전에 <head></head>태그에 jquery.min.js 및 css파일을 include해줘야 된다.
<head>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>예시 HTML
<div id="moda_layer" class="modal_layer modal" style="display: none;">
<div class="modal_wrap " id="modal_wrap " style="display: block;">
<div class="art_tit">개인정보동의</div>
<!--닫기 버튼-->
<div class="layer_close"></div>
<h2 class="screen_out">개인정보 약관</h2>
<div class="agr_cont">
<ul>
<li>개인정보 이용 목적 : ~~~ </li>
<li>개인정보 수집 항목 : !!! </li>
<li>개인정보 보유 및 이용기간 : @@@ </li>
</ul>
</div>
</div>
</div>Java Script 예시
<script>
$(document).ready(function(){
$('.button ').on('click', function(){
$('#modal_layer').modal({
fadeDuration: 300,
showClose: false
});
});
$(".layer_close").on('click', $.modal.close);
});
</script>
'Library > JQuery' 카테고리의 다른 글
| [JQuery] JQuery trigger사용하여 강제로 click event 발생시키기 (0) | 2020.03.17 |
|---|---|
| [JQuery] CROS 오류, Jsonp로 해결하다 (0) | 2020.03.17 |
| [JQuery] how to get jquery this id , name,class (0) | 2020.03.16 |