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.
'개발' 카테고리의 다른 글
table-layout:fixed 테이블 셀 너비 변경하는 방법 (0) | 2022.11.25 |
---|---|
table-layout:fixed으로 테이블 너비 고정하기 (0) | 2022.11.24 |
input radio 버튼 클릭하면 하단 내용 보이기 / 숨기기 (0) | 2022.09.21 |
text-align으로 문단 정렬하기 (0) | 2022.09.16 |
테이블 헤더와 1열 고정된 스크롤 테이블 만들기 (position: sticky) (0) | 2022.09.15 |
댓글