[재질문] 모달열기 한개만 되는거 여러개 열려면 어떻게 해야되나요 고수님들...
본문
모달창 소스 코드입니다.
번호를 매기고 그 번호대로 출력하게 하려면
어떻게 해야될까요....
스크립트는 초보라서
---------------------------------------------------------------
<!-- 상품 상세보기 1 -->
<div class="container1">
<a class="btn1 js-click-modal1">Open modal1</a>
<div class="modal1">
<div class="header1">
<p><strong>NCB354 상세보기</strong></p>
<a class="btn1 js-close-modal1 textlight">Close</a>
</div>
<div class="body1 scell">
<img src="354/1.jpg" width:100%;>
<img src="354/2.jpg" width:100%;>
<img src="354/3.jpg" width:100%;>
<img src="354/4.jpg" width:100%;>
<img src="354/5.jpg" width:100%;>
<img src="354/6.jpg" width:100%;>
<img src="354/7.jpg" width:100%;>
<img src="354/8.jpg" width:100%;>
</div>
</div>
</div>
<!-- 상품 상세보기 2 -->
<div class="container1">
<a class="btn1 js-click-modal1">Open modal1</a>
<div class="modal1">
<div class="header1">
<p><strong>NCB553 상세보기</strong></p>
<a class="btn1 js-close-modal1 textlight">Close</a>
</div>
<div class="body1 scell">
<img src="553/1.jpg" width:100%;>
<img src="553/2.jpg" width:100%;>
<img src="553/3.jpg" width:100%;>
<img src="553/4.jpg" width:100%;>
<img src="553/5.jpg" width:100%;>
<img src="553/6.jpg" width:100%;>
<img src="553/7.jpg" width:100%;>
<img src="553/8.jpg" width:100%;>
</div>
</div>
</div>
<script>
$('.js-click-modal1').click(function(){
$('.container1').addClass('modal1-open');
});
$('.js-close-modal1').click(function(){
$('.container1').removeClass('modal1-open');
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
위 스크립트에서 어떻게 해야될까요...
순서대로 출력을 하려면....
답변 3
<script>
$('.js-click-modal1').on('click', function(){
$(this).closest('.container1').addClass('modal1-open');
});
$('.js-close-modal1').on('click', function(){
$(this).closest('.container1').removeClass('modal1-open');
});
</script>
번호를 매기고 그번호대로 출력을 해야한다?
<script>
$('.js-click-modal1').click(function(){
$(this).closest('.container1').find('.modal1').addClass('modal1-open');
});
$('.js-close-modal1').click(function(){
$(this).closest('.modal1').removeClass('modal1-open');
});
</script>
모달 창을 여는 버튼을 클릭하면 모든 .container1 요소에
modal1-open 클래스가 추가
그게 무슨 말일까요...?
제가 초보라서
(말씀 주신 코드 넣고 해봤는데 안되네요;;;ㅜ
(let i = 1; i <= 100; i++)
("modal" + i);
이런식으로 해야되는거같은데
먼저 해당된곳에 모달 창에 고유한 ID를 할당하고,
해당 ID를 버튼의 data-modal-id 속성에 저장합니다.
그런 다음 JavaScript 코드에서 해당 ID를 가져와서 모달 창을 열고 닫아야 하겟지요
그럼 위에 코드로는 진행이 안되는거고...
제가 스크립트는 초보라서..
예시 한번만 적어주실 수 있을까요ㅠ
먼저 요소를 바로 잡으세요
<div class="container1" data-modal-id="1">
<a class="btn1 js-click-modal1">Open modal1</a>
<div class="modal1" id="modal1-1">
<div class="header1">
<p><strong>NCB354 상세보기</strong></p>
<a class="btn1 js-close-modal1 textlight">Close</a>
</div>
<div class="body1 scell">
<img src="354/1.jpg" width:100%;>
<img src="354/2.jpg" width:100%;>
<img src="354/3.jpg" width:100%;>
<img src="354/4.jpg" width:100%;>
<img src="354/5.jpg" width:100%;>
<img src="354/6.jpg" width:100%;>
<img src="354/7.jpg" width:100%;>
<img src="354/8.jpg" width:100%;>
</div>
</div>
</div>
이런식으로잡으세요
그러면 두번째상품보기는 2 가되겠고 이런식으로 잡으면되겟죠?
그리고 스크립트 쪽에서
<script>
$('.js-click-modal1').click(function(){
var modalId = $(this).closest('.container1').data('modal-id');
$('#modal1-' + modalId).addClass('modal1-open');
});
$('.js-close-modal1').click(function(){
$(this).closest('.modal1').removeClass('modal1-open');
});
</script>
모달 창에 고유한 ID를 할당하고,
해당 ID를 버튼의 data-modal-id 속성에 저장
그런 다음 JavaScript 코드에서 해당 ID를 가져와서 모달 창을 열고 닫기.
그럼 짜잔~~
말씀 주신 코드로 복사 붙여넣기 하였는데
<a class="btn1 js-click-modal1">Open modal1</a>
이부분만 나오고 눌러도 반응이 없습니다!!...
두번째를 만들어주셔야죠"2"
<div class="container1" data-modal-id="1">
<a class="btn1 js-click-modal1">Open modal1</a>
<div class="modal1" id="modal1-1">
<div class="header1">
<p><strong>NCB354 상세보기</strong></p>
<a class="btn1 js-close-modal1 textlight">Close</a>
</div>
<div class="body1 scell">
<img src="354/1.jpg" width:100%;>
<img src="354/2.jpg" width:100%;>
<img src="354/3.jpg" width:100%;>
<img src="354/4.jpg" width:100%;>
<img src="354/5.jpg" width:100%;>
<img src="354/6.jpg" width:100%;>
<img src="354/7.jpg" width:100%;>
<img src="354/8.jpg" width:100%;>
</div>
</div>
</div>
<!-- 상품 상세보기 2 -->
<div class="container1" data-modal-id="2">
<a class="btn1 js-click-modal1">Open modal1</a>
<div class="modal1" id="modal1-2">
<div class="header1">
<p><strong>NCB553 상세보기</strong></p>
<a class="btn1 js-close-modal1 textlight">Close</a>
</div>
<div class="body1 scell">
<img src="553/1.jpg" width:100%;>
<img src="553/2.jpg" width:100%;>
<img src="553/3.jpg" width:100%;>
<img src="553/4.jpg" width:100%;>
<img src="553/5.jpg" width:100%;>
<img src="553/6.jpg" width:100%;>
<img src="553/7.jpg" width:100%;>
<img src="553/8.jpg" width:100%;>
</div>
</div>
</div>
<script>
$('.js-click-modal1').click(function(){
var modalId = $(this).closest('.container1').data('modal-id');
$('#modal1-' + modalId).addClass('modal1-open');
});
$('.js-close-modal1').click(function(){
$(this).closest('.modal1').removeClass('modal1-open');
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
이렇게 들어가있어도 버튼 두개만 달랑 나오고 스크립트 실행이 안됩니다...ㅠㅜㅜㅜ
각 버튼의 data-modal-id와 해당 모달 창의 ID가 일치해야 해주세요
똑같이 맞췄는데도... 안열리네요
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container1" data-modal-id="1">
<a href="#none" class="btn1 js-click-modal1">Open modal1</a>
<div class="modal1" id="modal1-1">
<div class="header1">
<p><strong>NCB354 상세보기</strong></p>
<a href="#none" class="btn1 js-close-modal1 textlight">Close</a>
</div>
<div class="body1 scell">
<img src="354/1.jpg" width:100%;>
<img src="354/2.jpg" width:100%;>
<img src="354/3.jpg" width:100%;>
<img src="354/4.jpg" width:100%;>
<img src="354/5.jpg" width:100%;>
<img src="354/6.jpg" width:100%;>
<img src="354/7.jpg" width:100%;>
<img src="354/8.jpg" width:100%;>
</div>
</div>
</div>
<!-- 상품 상세보기 2 -->
<div class="container1" data-modal-id="2">
<a href="#none"class="btn1 js-click-modal1">Open modal1</a>
<div class="modal1" id="modal1-2">
<div class="header1">
<p><strong>NCB553 상세보기</strong></p>
<a href="#none" class="btn1 js-close-modal1 textlight">Close</a>
</div>
<div class="body1 scell">
<img src="553/1.jpg" width:100%;>
<img src="553/2.jpg" width:100%;>
<img src="553/3.jpg" width:100%;>
<img src="553/4.jpg" width:100%;>
<img src="553/5.jpg" width:100%;>
<img src="553/6.jpg" width:100%;>
<img src="553/7.jpg" width:100%;>
<img src="553/8.jpg" width:100%;>
</div>
</div>
</div>
<script>
$('.modal1').hide();
$('.js-click-modal1').click(function(){
$(this).next().show();
});
$('.js-close-modal1').click(function(){
$(this).parent().parent().hide();
});
</script>
복사해서 테스트 해보세요.
수정해서 다시 올렸습니다.