leanModal 기본 사용법(쓰는법,적용법)
- Web
- 2019. 4. 12.
일단 leanModal.min.js을(를) 다운합니다
그리고나서 프로젝트 폴더 안에 넣습니다
<head>안에 경로를 넣어주고
<script type="text/javascript" src="경로/jquery.leanModal.min.js"></script>스크립트에 함수를 추가해줍니다.
<script type="text/javascript">
$(function() {
$("a[rel*=leanModal]").leanModal();
});
</script>
제이쿼리 선택자가 <a rel=leanModal>을(를) 가르키고 있는데,
이건 마음대로 바꿔도 됩니다
<a rel=abc>,<a rel=clean>등등 ㅇㅅㅇ
그외에도 class나 id로 선택하고 싶으면
$(".class").leanModal();
$("#id").leanModal();
이런식으로 하면 된다는건 다들 알고있을거라 생각합니다..
이걸 누르면 id가 leanModal인 것이 모달창으로 뜨는 것인데
그럼 본문안에 모달창을 띄울 것을 작성하면 됩니다
<div id="leanModal"
<h2>이메일무단수집거부</h2>
<p>
본사이트에 게시된 이메일주소가 전자우편 수집 프로그램이나 그 밖의
장치를 이용하여 무단으로 수집되는 것을 거부하며, 이를 위반 시
보호법에 의해 처벌됨을 유념하시기 바랍니다.
</p>
</div>간단하게 이메일무단수집거부로 예를 들었습니다
이제 <a rel=leanModal>을(를) 클릭하면
이런식으로 뜹니다
CSS
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
모달창 뒤 불투명한 배경 css이고
#leanModal {
width: 600px;
padding: 30px;
display: none;
background: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
-moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
transform: translate(-50%, -50%);
}띄워진 모달창 css입니다.
본인 입맛에 맞게 수정하면 됩니다
※ 닫기 버튼도 할 수있습니다.
자세한건 leanModal에서 확인하면 됩니다