jquery modal 모달창 띄우기

jquery 로 간단히 모달창 띄우기를 해본다.

모달창 기법은 CSS 와 jquery 등이 어우러져 깔끔한 팝업창 형식으로 노출된다.

 

아주 간단히 처리할수 있어 소개해 본다.

 

https://jquerymodal.com/

jQuery Modal

예제랑 실제 동작 화면은 위 사이트에서 직접 클릭해 보면 확인할 수 있다.

 

몇몇 예제만 살펴 보겠다.

 

우선 아래의 라이브러리를 복사해서 시작한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<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" />
 

 

1. HTML 코드만으로 바로 모달창 띄우기

<div id="ex1" class="modal">
  <p>안녕하세요. 모달창안의 내용부분입니다.</p>
  <a href="#" rel="modal:close">닫기</a>
</div>
 
<p><a href="#ex1" rel="modal:open">모달창띄우기</a></p>

 

[실행화면]

 

2. jquery 소스로 동작시켜 모달창 띄우기 : 천천히 자연스럽게 화면노출된다.

 

<p><a class="btn" href="#ex7">도달창띄우기2</a></p>
 
<div id="ex7" class="modal">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
 
<script>
    $('a[href="#ex7"]').click(function(event) {
      event.preventDefault();
 
      $(this).modal({
        fadeDuration: 250
      });
    });
</script>

 

[실행화면]

 

3. a태그를 클릭하지 않고, jquery 소스로 바로 모달창을 띄우고 싶을때

 

<p><a class="btn" href="#ex7">도달창띄우기2</a></p>
<div id="ex7" class="modal">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
 
<script>
     $('a[href="#ex7"]').modal({
        fadeDuration: 250
     });
</script>

위의 소스는 해당페이지가 로딩되지말자 바로 모달창이 실행된다.

 

 

<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal">
  <p>Thanks for clicking. That felt good.</p>
  <a href="#" rel="modal:close">Close</a>
</div>
 
<!-- Link to open the modal -->
<p><a href="#ex1" rel="modal:open">Open Modal</a></p>
 
<p><a class="btn" href="#ex7">Open Modal22222222</a></p>
 
 
<div id="ex7" class="modal">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<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" />
<script>
    $('a[href="#ex7"]').click(function(event) {
      event.preventDefault();
 
      $(this).modal({
        fadeDuration: 250
      });
    });
</script>