코드랩 레퍼런스

Layer Popup - basic 본문

SAMPLE

Layer Popup - basic

webstoryboy 2018. 1. 25. 15:45

See the Pen layer Popup by Webstoryboy (@webstoryboy) on CodePen.

버튼을 클릭하면 숨겨져 있던 레이어 팝업이 보이는 가장 기본적인 레이어 팝업입니다.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {background: #ba68c8;}
		a {text-decoration: none; color:#666;}

		/* btn */
		.btn-wrap {display: flex; justify-content : center; align-items : center; height: 100vh;}
		.btn-wrap > a {background-color:#fce4ec; display:inline-block; color: rgba(0,0,0,0.7); padding: 13px 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.26); height:23px; line-height: 23px; margin:5px; border-radius: 3px;}

		/* modal */
		#modal {position: fixed; left:0; top:0; width: 100%; height: 100%; display: none; }
		#modal .modal-bg {background: rgba(0,0,0,0.7); display:flex; align-items: center; justify-content: center; height: 100%; }
		#modal .modal-bg .modal-cont {position:relative; background: #fff; padding: 40px; max-width: 500px; display: inline-block;}
		#modal .modal-bg .modal-cont h2 {font-size: 30px; margin:0;}
		#modal .modal-bg .modal-cont p {font-size: 18px; }
		#modal .modal-bg .modal-cont .close {position: absolute; top: 0; right:0; margin:20px; padding: 10px; background: #000; border-radius: 50%; }
		#modal .modal-bg .modal-cont .close svg {width: 24px; fill: #fff; vertical-align: top;}
	</style>
</head>
<body>

	<div class="btn-wrap">
		<a href="#" class="btn">Popup1</a>
	</div>

	<div id="modal">
		<div class="modal-bg">
			<div class="modal-cont">
				<h2>Layer Popup</h2>
				<p>We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.</p>
				<a href="#" class="close close1">
					<svg viewBox="0 0 24 24">
						<path d="M14.1,12L22,4.1c0.6-0.6,0.6-1.5,0-2.1c-0.6-0.6-1.5-0.6-2.1,0L12,9.9L4.1,2C3.5,1.4,2.5,1.4,2,2C1.4,2.5,1.4,3.5,2,4.1
		L9.9,12L2,19.9c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4l7.9-7.9l7.9,7.9c0.3,0.3,0.7,0.4,1.1,0.4
		s0.8-0.1,1.1-0.4c0.6-0.6,0.6-1.5,0-2.1L14.1,12z"/>
					</svg>
				</a>
			</div>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script>
		$(".btn").click(function(){
			$("#modal").css("display","block");
		});

		$(".close").click(function(){
			$("#modal").css("display","none");
		});
	</script>

</body>
</html>


Share

Ad

Comments