jQuery 레이어 팝업 라이브러리

웹페이지에서 레이어 팝업을 쉽게 쓸수 있는 라이브러리를 찾았다.

 

출처 : https://dinbror.dk/bpopup/

 

사용법은 아주 간단하다.

 

1. 라이브러리 include

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<script type='text/javascript' src='jquery.bpopup.min.js'></script>

 

2. 팝업이 뜰 div 지정

<div class="sect6">
		<div class="sect-wrap"> 
			<div class="list_more wow fadeInUp" onclick="go_popup()">
				<img src="images/more_icon01.png" alt="더 보기">
			</div>
		</div>
	</div> <!-- sect6 -->


	<script type="text/javascript">
	  function go_popup() {
		$('#popup').bPopup();
	  };
	</script>


<style type="text/css">
.Pstyle {
 opacity: 0;
 display: none;
 position: relative;
 width: auto;
 border: 5px solid #fff;
 padding: 20px;
 background-color: #fff;
}

.b-close {
 position: absolute;
 right: 5px;
 top: 5px;
 padding: 5px;
 display: inline-block;
 cursor: pointer;
}
</style>

 
 <div id="popup" class="Pstyle">
  <span class="b-close">X</span>
  <div class="content" style="height: auto; width: auto;">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/5_2htTpUhG8?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
 </div>