jQuery click pop
2021. 12. 14. 12:51ㆍStudy/jQuery
CSS
.pop{}
.pop .modal_box{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .7; display: none; z-index: 50;}
.pop .popup{position: fixed; top: 50%; left: 50%; margin: -300px 0 0 -300px; width: 600px; height: 600px; background: #fff; box-shadow: 1px 3px 7px 0px #666; z-index: 100; display:none;}
.pop .popup img{width: 94%; margin:20px 3%;}
.pop .popup p{width: 94%; margin:10px 3%; text-align: center;}
.pop .popup .close_btn{position: absolute; top: 25px; right: 5px; display: block;width: 32px; height: 32px; text-indent: -999px; overflow: hidden; padding: 9px 9px; background: url(../images/cancel.png) no-repeat;}
JS
$(document).ready(function(){
var memo = ['이미지 내용1','이미지 내용2','이미지 내용3','이미지 내용4'];
$('.pop .pop_menu a').click(function(e){
e.preventDefault();
var ind = $(this).index('.pop .pop_menu a'); // 0 1 2 3
$('.pop .modal_box').fadeIn('fast');
$('.pop .popup').fadeIn('slow');
$('.pop .popup img').attr('src','./images/big'+(ind+1)+'.jpg');
$('.pop .popup p').text(memo[ind]);
});
$('.close_btn,.pop .modal_box').click(function(e){
e.preventDefault();
$('.pop .modal_box').hide();
$('.pop .popup').hide();
});
});
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이용안내-할인프로모션</title>
<link rel="stylesheet" href="css/sub2_2content.css">
</head>
<body>
<section class="pop">
<h4>겔러리</h4>
<ul class="pop_menu">
<li><a href="#" >이미지1</a></li>
<li><a href="#" >이미지2</a></li>
<li><a href="#" >이미지3</a></li>
<li><a href="#" >이미지4</a></li>
</ul>
<div class="modal_box"></div>
<div class="popup">
<img src="./images/big2.jpg" alt="">
<p>이미지에 대한 내용....</p>
<a href="#" class="close_btn">닫기</a>
</div>
</section>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="./js/sub2_2.js"></script>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery 순차적 접근, 자동롤링 (0) | 2021.12.14 |
|---|---|
| jQuery 객체 배열 팝업 (0) | 2021.12.14 |
| jQuery layer popup (0) | 2021.12.14 |
| jQuery tabmenu3 (0) | 2021.12.14 |
| jQuery tabmenu2 (0) | 2021.12.14 |
