jQuery layer popup
2021. 12. 14. 12:24ㆍStudy/jQuery
JS
$(document).ready(function(){
$('.openBtn').on('click', function(e){
e.preventDefault();
$(this).next('.big').fadeIn('slow');
$('.box').show();
});
$('.closeBtn, .box').on('click', function(e){
e.preventDefault();
$('.big').fadeOut('fast');
$('.box').hide();
});
});
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레이어 팝업 띄우기</title>
<style>
*{padding: 0; margin: 0;}
a{text-decoration: none; color: #333;}
.pop_gallery{}
.pop_gallery .box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); display: none;}
.pop_gallery .big{position: absolute; left: 50%; margin-left: -257px; top:50%; margin-top: -200px; width: 514px; border: 5px solid #333; overflow: hidden; display: none;}
.pop_gallery .big p{text-align:center; background:#fff;}
.pop_gallery .big .closeBtn{display: block; text-align: center; background: #fff;}
</style>
</head>
<body>
<div class="pop_gallery">
<div class="box"></div>
<ul>
<li>
<a href="#" class="openBtn"><img src="images/a1.jpg" alt="확대이미지보기"></a>
<div class="big">
<img src="images/a2.jpg" alt="확대이미지">
<p>이미지에 대한 내용</p>
<a class="closeBtn" href="#">닫기</a>
</div>
</li>
<li>
<a href="#" class="openBtn"><img src="images/b1.jpg" alt="확대이미지보기"></a>
<div class="big">
<img src="images/b2.jpg" alt="확대이미지">
<p>이미지에 대한 내용</p>
<a class="closeBtn" href="#">닫기</a>
</div>
</li>
</ul>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script src="layer_popup.js"></script>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery 객체 배열 팝업 (0) | 2021.12.14 |
|---|---|
| jQuery click pop (0) | 2021.12.14 |
| jQuery tabmenu3 (0) | 2021.12.14 |
| jQuery tabmenu2 (0) | 2021.12.14 |
| jQuery tabmenu1 (0) | 2021.12.14 |
