[javaScript] jQuery로 modal 창 띄우기

HTML

<!-- btn -->
<div class="btn_wrap btn_pop_wrap">
    <a
        href="#n"
        class="btn btn_pop js_btn_modal"
        data-target="modal_type1"
        >모달 띄우기</a
    >
</div> 

<!-- dim -->
<div id="dim"></div>

<!-- modal -->
<div class="modal_contents js_modal_pop" id="modal_type1">
    <button type="button" class="btn_modal_close js_btn_modal_close"></button>
    <div class="modal_wrap">
        모달 팝업 콘텐츠
    </div>
</div>

 

CSS

/* modal */
body.ofh {
	overflow-y: hidden;
}
#dim {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10001;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
}
.modal_contents {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 10002;
	width: 90vw;
	max-width: 640px;
	padding: 120px 20px 40px 40px;
	border-radius: 20px;
	background-color: #fff;
}
.modal_wrap {
	overflow-y: scroll;
	width: 100%;
	max-height: 70vh;
}
.modal_wrap::-webkit-scrollbar {
	width: 5px;
}
.modal_wrap::-webkit-scrollbar-thumb {
	background: #c5c5c5;
	border-radius: 9px;
}
.modal_wrap::-webkit-scrollbar-track {
	background-color: transparent;
}
.btn_modal_close {
	position: absolute;
	top: 40px;
	right: 40px;
	width: 64px;
	height: 64px;
	background-image: url("ico_pop_close.png");
	background-color: transparent;
	background-size: contain;
	background-repeat: no-repeat;
}

 

jQuery

function modalOpen() {
	const dim = $("#dim");
	const body = $("body");

	let btnPop = $(".js_btn_modal");
	let modalPop = $(".js_modal_pop");
	let btnPopClose = $(".js_btn_modal_close");

	btnPop.on("click", function () {
		let target = $(this).data("target");
		let targetPop = $("#" + target);
		body.addClass("ofh");
		dim.stop().fadeIn();
		targetPop.stop().fadeIn();
		return false;
	});

	btnPopClose.on("click", function () {
		body.removeClass("ofh");
		modalPop.stop().fadeOut();
		dim.stop().fadeOut();
	});
}