1 개요[ | ]
- jQuery 모달 다이얼로그
- jQuery UI 없이 순수 jQuery로 구현한 모달 다이얼로그
- 창이 열렸을 때 배경("#dialog-background")을 클릭하거나 [창 닫기] 버튼("#btn-close-dialog")을 눌러 창을 닫을 수 있음
2 예시[ | ]
html
Copy
<style>
#dialog-background {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,.3);
z-index: 10;
}
#my-dialog {
display: none;
position: fixed;
left: calc( 50% - 160px ); top: calc( 50% - 70px );
width: 320px; height: 140px;
background: #fff;
z-index: 11;
padding: 10px;
}
</style>
<script src='//code.jquery.com/jquery.min.js'></script>
<script>
$(function(){
$("#btn-open-dialog,#dialog-background,#btn-close-dialog").click(function () {
$("#my-dialog,#dialog-background").toggle();
});
});
</script>
간단한 모달창 <button id="btn-open-dialog">창 열기</button>
<div id="my-dialog">
창 내용
</div>
<div id="dialog-background"></div>
3 같이 보기[ | ]
편집자 Jmnote 110.14.74.130 166.125.251.10 115.94.118.130 Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.