한 페이지에 여러개 모달 팝업창 띄우기

1. 소스

[HTML]

<div class="M_wrap">
		<h1 class="M_main_title">팝업 버튼창</h1>
		
		<div class="M_content_wrap">
			<!-- 버튼 -->
			<a href="javascript:openPop('modal1');" class="btn_box">	
				<p>버튼1</p> 
				<span class="arrow_box"></span>
			</a>
			<a href="javascript:openPop('modal2');" class="btn_box">
				<p>버튼2</p> 
				<span class="arrow_box"></span>
			</a>	
			<a href="javascript:openPop('modal3');" class="btn_box">
				<p>버튼3</p> 
				<span class="arrow_box"></span>
			</a>	
			<a href="javascript:openPop('modal4');" class="btn_box">
				<p>버튼4</p> 
				<span class="arrow_box"></span>
			</a>
		</div>

		<!-- 팝업창 -->
		<div class="ADpopup_wrap modal1" style="display: none;">
			<div class="AD_info">
				모달01
			</div>
			
			<input type="button" value="닫기" class="close_btn">
			
		</div>
		<div class="ADpopup_wrap modal2" style="display: none;">
			<div class="AD_info">
				모달02
			</div>
			<input type="button" value="닫기" class="close_btn">
		</div>
		<div class="ADpopup_wrap modal3" style="display: none;">
			<div class="AD_info">
				모달03
			</div>
			<input type="button" value="닫기" class="close_btn">
		</div>
		<div class="ADpopup_wrap modal4" style="display: none;">
			<div class="AD_info">
				모달04
			</div>
			<input type="button" value="닫기" class="close_btn">
		</div>
	</div>

 

[CSS]

<style>
/* reset */
	*,h1 {margin:0;padding:0;box-sizing:border-box;}
	html,body{width:100%;height:100%;}
	body {background:#fff;-webkit-overflow-scrolling:touch;}
	a:link, a:visited, a:hover{color: #333; text-decoration: none;}

	.M_wrap{width: 500px; height: 430px; margin: 100px auto; background: #f6f6f6; border-radius: 10px; overflow: hidden; position: relative;}

	h1.M_main_title{height: 75px; background-color: #0057b8; color: #fff; text-align: center; font-size: 22px; padding: 23px 0; font-weight: 600;}
	.M_content_wrap{padding: 30px 20px 40px;}
	.M_content_wrap > .btn_box{ border: 1px solid #dadada; padding: 15px 40px 15px; background: #f5f6f7; text-align: left; margin-bottom: 20px; box-shadow: 2px 2px 6px #dadada; font-weight: 600; font-size: 17px; position: relative; display: inline-block; width: 100%;}
	.M_content_wrap > .btn_box:last-child{margin-bottom: 0;}
	.M_content_wrap > .btn_box span.arrow_box{position: relative;}
	.M_content_wrap > .btn_box span.arrow_box{content: '';  position: absolute; width: 10px; height: 10px; border-top: 3px solid #cacaca; border-right: 3px solid #cacaca; display: inline-block; transform: rotate(45deg); top: 20px; right: 25px;}

	.ADpopup_wrap{width: 400px; height: 300px; position: absolute; border: 1px solid #cacaca; background: #fff; top: 93px; left: 50%; margin-left: -200px; padding: 10px; text-align: center;}
	.AD_info{height: 243px;}
	.close_btn{ padding: 5px 10px; color: #fff; background: #003666; font-size: 16px; border-radius: 5px;}
</style>

 

 

[JS]

<script type="text/javascript">
	// 팝업 열기
	function openPop(modalname) {
		document.get
		$("." + modalname).css('display','block');
	}
       
	$(document).ready(function () {
	// 팝업 닫기
		$(".ADpopup_wrap .close_btn").click(function() {
			$('.ADpopup_wrap').css('display','none');
		});
	});
</script>

 

2. 결과 화면 

 

See the Pen Untitled by H__jung (@honghongbyul) on CodePen.