레이어 팝업 기본형태

Jquery 버전

<script>
//레이어 팝업창 떠있을 경우, 본문은 스크롤 안되게 막기
function scrollDisable(){
	$('html, body').addClass('hidden');
}
function scrollAble(){
	$('html, body').removeClass('hidden');
}

function get_lesson_information(){
	var lay_container = '<div class="layer_popup_container" onclick="this.remove();"></div>';
	var lay_contents = '<div class="layer_popup_contents" onclick="event.stopPropagation();"></div>';
	var lay_close = '<div class="layer_popup_close" onclick="$(\'.layer_popup_container\').remove()"><img src="//www.edst.co.kr/new_IMG/big_close.gif" alt="닫기버튼"></div>';
	var lay_main = '<div class="layer_popup_main">내용</div>';
	$("body").append(lay_container);
	$(".layer_popup_container").append(lay_contents);
	$(".layer_popup_contents").append(lay_close);
	$(".layer_popup_contents").append(lay_main);
}
</script>

<style>
.layer_popup_container{display:flex; position:fixed; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(0,0,0,0.5); flex-wrap:wrap; align-items:center; justify-content:center;}
.layer_popup_contents{display:flex; position:relative; width:80%; max-width:600px; height:70%; align-items:center; justify-content:center; background:#fff;}
.layer_popup_close{position:absolute; width:50px; height:50px; top:-50px; right:0; line-height:50px; text-align:center; font-size:50px; cursor:pointer;}
.layer_popup_main{width:calc(100% - 40px); height:calc(100% - 100px); padding:50px 20px; margin:auto; overflow-x:hidden; overflow-y:auto;}
.hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}
</style>

<div onclick="get_lesson_information()">팝업열기</div>

JavaScript 버전

<script>
//레이어 팝업창 떠있을 경우, 본문은 스크롤 안되게 막기
function scrollDisable(){
	html.classList.add('hidden');
	body.classList.add('hidden');
}
function scrollAble(){
	html.classList.remove('hidden');
	body.classList.remove('hidden');
}

function get_lesson_information(){
	var lay_container = '<div id="layer_popup_container" onclick="this.remove();"></div>';
	var lay_contents = '<div id="layer_popup_contents" onclick="event.stopPropagation();"></div>';
	var lay_close = '<div class="layer_popup_close" onclick="layer_popup_container.remove()"><img src="//www.edst.co.kr/new_IMG/big_close.gif" alt="닫기버튼"></div>';
	var lay_main = '<div class="layer_popup_main">내용</div>';
	document.body.innerHTML += lay_container;
	layer_popup_container.innerHTML += lay_contents;
	layer_popup_contents.innerHTML += lay_close;
	layer_popup_contents.innerHTML += lay_main;
}
</script>

<style>
#layer_popup_container{display:flex; position:fixed; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(0,0,0,0.5); flex-wrap:wrap; align-items:center; justify-content:center;}
#layer_popup_contents{display:flex; position:relative; width:80%; max-width:600px; height:70%; align-items:center; justify-content:center; background:#fff;}
.layer_popup_close{position:absolute; width:50px; height:50px; top:-50px; right:0; line-height:50px; text-align:center; font-size:50px; cursor:pointer;}
.layer_popup_main{width:calc(100% - 40px); height:calc(100% - 100px); padding:50px 20px; margin:auto; overflow-x:hidden; overflow-y:auto;}
.hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}
</style>

<div onclick="get_lesson_information()">팝업열기</div>