jQuery 객체 배열 팝업
2021. 12. 14. 14:36ㆍStudy/jQuery
CSS
*{margin: 0; padding: 0;}
.pop .modal_box{position: fixed; left: 0; top: 0; z-index: 50; width: 100%; height: 100%;
background: #000; opacity: .7; display: none;}
.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: 60; display:none;}
.pop .popup img{width: 94%; margin:20px 3%;}
.pop .popup dl{width: 94%; margin:10px 3%; text-align: center;}
.pop .popup dt{font-size: 1.2em; font-weight: bold; margin-bottom: 10px; color: orange;}
.pop .popup .close_btn{position: absolute; top: 25px; right: 5px;
display: block; text-indent: -999px; overflow: hidden; width: 32px;
height: 32px; padding: 9px 9px; background: url(../images/cancel.png) no-repeat;}
JS
$(document).ready(function(){
// 객체배열 (json)
var memo = [
{title:'제품명1', price:'10,000원', sub1:'제품설명1', sub2:'제품설명2'}, // 0
{title:'제품명2', price:'20,000원', sub1:'제품설명1', sub2:'제품설명2'}, // 1
{title:'제품명3', price:'25,000원', sub1:'제품설명1', sub2:'제품설명2'}, // 2
{title:'제품명4', price:'30,000원', sub1:'제품설명1', sub2:'제품설명2'} // 3
];
$('.pop .pop_menu a').click(function(e){
e.preventDefault();
var txt ='';
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');
txt+= '<dl>';
txt+= '<dt>제품명 : '+memo[ind].title+'</dt>';
txt+= '<dd>제품가격: '+memo[ind].price+'</dd>';
txt+= '<dd>제품설명1 : '+memo[ind].sub1+'</dd>';
txt+= '<dd>제품설명2 : '+memo[ind].sub2+'</dd>';
txt+= '</dl>';
$('.pop .popup .txt').html(txt); // 태그를 넣어라
});
$('.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="">
<div class="txt">
</div>
<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.15 |
|---|---|
| jQuery 순차적 접근, 자동롤링 (0) | 2021.12.14 |
| jQuery click pop (0) | 2021.12.14 |
| jQuery layer popup (0) | 2021.12.14 |
| jQuery tabmenu3 (0) | 2021.12.14 |
