반응형
[JQuery] modal 만들기
브라우저의 옵션을 이용해 사용하지 않을 수 있는 팝업창과는 다르게 모달창은 기능상 반드시 노출을 시켜야하는 경우에 사용할 수 있다는 점에서 장점이 있다.
jQuery를 사용하면 쉽게 modal을 만들어낼 수 있다.
사용법
<!-- 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></head>사이에 넣어주면 jQuery와 jQuery의 modal을 사용할 준비가 끝난다.
같은 html상에 있는 코드를 modal에 띄우기
<!-- modal에 띄우고자하는 코드 -->
<div id="test" class="modal">
<p>떴다~ 떴다~ 모달창!</p>
<a href="#" rel="modal:close"><button>닫기</button></a> <!-- 닫기버튼 -->
</div>
<!-- href 속성값을 사용하여 modal을 띄워주는 링크 -->
<p><a href="#test" rel="modal:open"><button>모달창 띄우기</button></a></p>
외부의 html파일을 modal에 띄우기
<!-- modal버튼이 있는 html -->
<a href="ex.html" rel="modal:open">
<button>다른 html을 모달로!</button>
</a><!-- ex.html -->
<p>이건 ex.html입니다~</p>
<a href="#" rel="modal:close"><button>닫기</button></a>
참고자료
반응형
'Web > HTML,CSS,JS' 카테고리의 다른 글
| [html] Canvas로 특정 영역 스샷하기 (0) | 2020.01.14 |
|---|---|
| [JQuery] 버튼을 눌러 html tag 추가 및 삭제 (0) | 2019.10.10 |
| [JQuery] 같은 name의 여러개 input value 배열로 넘겨주기 (0) | 2019.10.08 |
| [HTML5] Geolocation을 활용하여 현재위치 불러오기 (0) | 2019.08.21 |
