반응형
구글링하다가 쉽게 모달창 띄우는 방법을 발견해서 저장,공유용으로 작성합니다.
jQuery Modal
This example demonstrates how visually customizable the modal is. This example shows how modals are centered automatically. It also demonstrates how a vertical scrollbar appears whenever the modal content overflows. More! Lorem ipsum dolor sit amet, consec
jquerymodal.com
1.라이브러리 복사 해줍니다.
<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" />
2. HTML 코드 작성
모달창 내용부분 div의 id와 모달창 띄울 버튼을 href 링크를 맞춰줍니다.
<div id="modal1" class="modal">
<p>모달창안의 내용부분</p>
<a href="#" rel="modal:close">닫기</a>
</div>
<p><a href="#modal1" rel="modal:open">모달창띄우기</a></p>3.결과
따로 스크립트를 넣지않고 적용되니 편리하게 사용할수 있을듯 합니다.
반응형
'Jquery, Javascript' 카테고리의 다른 글
| [Jquery] 모바일 기기 접속시 모바일 페이지로 이동하기 (0) | 2022.08.05 |
|---|---|
| [Jquery] Swiper Slider 이용해서 쉽게 슬라이드 사용하기 (6) | 2022.08.04 |
| [Jquery] 제이쿼리로 class 추가 (addclass) (0) | 2022.06.17 |
| [Jquery] alert 이용해서 알림창 띄우기 (0) | 2022.06.16 |
| [Jquery] 클릭시 슬라이드 sildeup(),slidedown(),slidetoggle() (0) | 2022.05.03 |
댓글