JQuery 모달 다이얼로그

1 개요[ | ]

jQuery 모달 다이얼로그
  • jQuery UI 없이 순수 jQuery로 구현한 모달 다이얼로그
  • 창이 열렸을 때 배경("#dialog-background")을 클릭하거나 [창 닫기] 버튼("#btn-close-dialog")을 눌러 창을 닫을 수 있음

2 예시[ | ]

<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 같이 보기[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}