<result.html>
<!-- 모달 모달 -->
<div id="wrap">
<div id="root">
<button type="button" id="modal_open_btn">모달 창 열기</button>
</div>
<div id="modal">
<div class="modal_content">
<h2>모달 창</h2>
<p>모달 창 입니다.</p>
<button type="button" id="modal_close_btn">모달 창 닫기</button>
</div>
<div class="modal_layer"></div>
</div>
<script type="text/javascript">
$("#modal_open_btn").click(function(){
$("#modal").attr("style", "display:block");
});
$("#modal_close_btn").click(function(){
$("#modal").attr("style", "display:none");
});
</script>
</div>
<!-- 모달 모달 -->
<modal.css>
@charset "UTF-8";
#root {
position: relative;
}
#modal {
display: none;
position:relative;
width:100%;
height:100%;
z-index:1;
}
#modal h2 {
margin:0;
}
#modal button {
display:inline-block;
width:100px;
margin-left:calc(100% - 100px - 10px);
}
#modal .modal_content {
width:300px;
height: 100%;
margin:100px auto;
padding:20px 10px;
background:#fff;
border:2px solid #666;
position: relative;
}
#modal .modal_layer {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.5);
z-index:-1;
}
생각보다 간단하지만! css 적용이 어려울 수 있음!
<body>
<div id="backImg">
<div id="backWhite">
<!-- 모달 모달 -->
<div id="wrap">
<!-- 모달 모달 -->
</div>
</body>두 <!-- 모달 모달 --> 사이에 소스 있음! 위치에 주의할 것
'JAVA SCRIPT' 카테고리의 다른 글
| 자바스크립트 serialize 사용하지 않고 파라미터 세팅(JSON) (0) | 2023.08.03 |
|---|---|
| JQuery, JSTREE를 그려보자! (0) | 2023.08.01 |
| 전체 체크박스, 자식 체크박스 다루기(자바스크립트, JQuery) (0) | 2023.08.01 |
| modal 모달창에 데이터 전달하기(table tr td , row, closest) (0) | 2023.04.27 |
댓글