모달창 modal 띄우기(HTML, CSS, Java Script)

JAVA SCRIPT

모달창 modal 띄우기(HTML, CSS, Java Script)

hhana 2023. 4. 25. 17:37

<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>

두  사이에 소스 있음! 위치에 주의할 것

저작자표시