[재질문] 모달열기 한개만 되는거 여러개 열려면 어떻게 해야되나요 고수님들... 채택완료
모달창 소스 코드입니다.
번호를 매기고 그 번호대로 출력하게 하려면
어떻게 해야될까요....
스크립트는 초보라서
---------------------------------------------------------------
<!-- 상품 상세보기 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개
</p>
<p><script>
$('.js-click-modal1').on('click', function(){
$(this).closest('.container1').addClass('modal1-open');
});</p>
<p>
$('.js-close-modal1').on('click', function(){
$(this).closest('.container1').removeClass('modal1-open');
});
</script></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
</p>
<p><script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></a>
<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></p>
<p><!-- 상품 상세보기 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></p>
<p><script>
$('.modal1').hide();
$('.js-click-modal1').click(function(){
$(this).next().show();
});</p>
<p> $('.js-close-modal1').click(function(){
$(this).parent().parent().hide();
});
</script></p>
<p>복사해서 테스트 해보세요.
수정해서 다시 올렸습니다.
댓글을 작성하려면 로그인이 필요합니다.
번호를 매기고 그번호대로 출력을 해야한다?
<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 클래스가 추가
답변에 대한 댓글 10개
해당 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>
이부분만 나오고 눌러도 반응이 없습니다!!...
<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>
이렇게 들어가있어도 버튼 두개만 달랑 나오고 스크립트 실행이 안됩니다...ㅠㅜㅜㅜ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
제가 초보라서
(말씀 주신 코드 넣고 해봤는데 안되네요;;;ㅜ
(let i = 1; i <= 100; i++)
("modal" + i);
이런식으로 해야되는거같은데