본문 바로가기
웹디자인기능사 실기/TIP

웹디자인기능사 실기 중앙정렬 MODAL(POPUP)

BEANYCODE 2021. 4. 30. 16:27

 

 

HTML

 

<!doctype html>

<html>
<meta charset="utf-8">
<title>중앙정렬 MODAL(POPUP)</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
<script src="script/jquery-1.12.3.js" type="text/javascript"></script>
<script src="script/index.js" type="text/javascript"></script>
</html>
<body>
<div class="wrapper">
	<header class="clearfix">
		<!-- header code -->
	</header>
	<section class="visual">
		<!-- visual code -->
	</section>
	<section class="contents">
		<div class="notice">
			<!-- notice code -->
		</div>
		<div class="gallery">
			<!-- gallery code -->
		</div>
		<div class="banner">
			<!-- banner code -->
		</div>
	</section>
	<footer>
		<!-- footer code -->
	</footer>
	<div class="modal">
		<!-- modal code -->
	</div>
</div>
</body>

 

 

<!-- modal code -->

<div class="info_wrap">
  <p class="title">Lorem ipsum</p>
  <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  Incidunt, repudiandae, illum, quo voluptatem suscipit natus laborum delectus at 
  molestiae hic quia ad dolores culpa corrupti iste aspernatur expedita nesciunt autem
  beatae vero? Doloremque, nihil expedita debitis assumenda ut iste quas explicabo magni
  necessitatibus aliquam illum incidunt provident sunt perspiciatis nemo!</p>
  <a class="btn_close" href="#">× close</a>
</div>

 

 

CSS

/* modal */
.modal { display: none; position: fixed; left: 0; top: 0; z-index:11; width: 100%; height: 100%; background: rgba(0,0,0,0.7); }
.modal .info_wrap { width: 450px; height: 280px; padding: 15px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.modal .title { font-weight: bold; font-size: 18px; margin-bottom: 20px; }
.modal .desc { margin-bottom: 20px; font-size: 16px; }
.modal .btn_close {float:right; padding: 5px; background: #888; color: #fff;}

 

jQuery

$(document).ready(function(){

	//modal

	$(".btn_pop").click(function(){
		$(".modal").css("display", "block");
		return false;
	});
	$(".btn_close").click(function(){
		$(".modal").css("display", "none");
		return false;
	});

});

 

'웹디자인기능사 실기 > TIP' 카테고리의 다른 글

웹디자인기능사 실기 중앙정렬 contents > tab  (0) 2021.05.12
웹디자인기능사 실기 왼쪽정렬 MODAL(POPUP)  (0) 2021.05.11
웹디자인기능사 실기 유형 중앙정렬 header+footer inner  (0) 2021.04.29
웹디자인기능사 실기 HTML , CSS  (0) 2021.04.28
웹디자인기능사 실기 유형 중앙정렬 FOOTER  (0) 2021.04.27

'웹디자인기능사 실기/TIP' Related Articles

티스토리툴바