jQuery (jQuery Pannel 만들기)

---

개요

 

이번에는 jQuery를 이용하여 이미지를 클릭할 시 그 이미지에 대한 설명이 나오는 Pannel를 만들어 보도록 하겠습니다!.

 

---

설명

 

<script	src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

 

우선 jQuery를 사용하기 위해 맨위에 삽입해주면 됩니다.

 

---

CSS 파일

 

.popup_panel {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}

.popup_panel div.popup_bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .5;
	filter: alpha(opacity = 50);
}

.popup_panel div.popup_contents {
	position: absolute;
    top: 40%;
    left: 50%;
    width: 450px;
    height: auto;
    border: 10px solid #010204;
    background-color: #fff;
}

 

---

js 파일

 

$(document).ready(
		function() {

			var $panel = $(".popup_panel");

			var $panelContents = $panel.find(".popup_contents");

			$("#btn_popup_open")
					.on(
							"click",
							function(e) {

								// 팝업 가운데 설정(가로)
								if ($panelContents.outerWidth() < $(document)
										.width()) {
									$panelContents.css("margin-left", "-"
											+ $panelContents.outerWidth() / 2
											+ "px");
								} else {
									$panelContents.css("left", "0px");
								}

								// 팝업 가운데 설정(세로)
								if ($panelContents.outerHeight() < $(document)
										.height()) {
									$panelContents.css("margin-top", "-"
											+ $panelContents.outerHeight() / 2
											+ "px");
								} else {
									$panelContents.css("top", "0px");
								}

								// 레이어 팝업 열기
								$panel.fadeIn();
							});

			// 팝업 닫기 이벤트 정의
			$("#btn_popup_close").on("click", popupClose);

			// 팝업 배경 클릭 이벤트 정의
			$panel.find(".popup_bg").on("click", popupClose);

			function popupClose(e) {

				$panel.fadeOut();

				// 이벤트 기본 동작 중단
				e.preventDefault();
			}
		});

 

---

Html 파일

<img alt="" src="images/interesting1.jpg"
						id="btn_popup_open">
						<div class="popup_panel">
							<div class="popup_bg"></div>
							<div class="popup_contents">
								<a href="javascript:void(0)" id="btn_popup_close">닫기</a>
								<h1 align="center">Python</h1>
								<h5>내용~~~~~~~</h5>
							</div>
						</div>

 

이렇게 하시면 이미지를 클릭하면 Pannel이 나오게 됩니다!

 

---