[재질문] 모달열기 한개만 되는거 여러개 열려면 어떻게 해야되나요 고수님들...

[재질문] 모달열기 한개만 되는거 여러개 열려면 어떻게 해야되나요 고수님들...

QA

[재질문] 모달열기 한개만 되는거 여러개 열려면 어떻게 해야되나요 고수님들...

답변 3

본문

모달창 소스 코드입니다.

 

번호를 매기고 그 번호대로 출력하게 하려면

 

어떻게 해야될까요....

 

스크립트는 초보라서

 

---------------------------------------------------------------

 

 

<!-- 상품 상세보기 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 클래스가 추가
 

먼저 해당된곳에 모달 창에 고유한 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를 가져와서 모달 창을 열고 닫기.

그럼 짜잔~~

<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>





이렇게 들어가있어도 버튼 두개만 달랑 나오고 스크립트 실행이 안됩니다...ㅠㅜㅜㅜ


<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>


복사해서 테스트 해보세요.

수정해서 다시 올렸습니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 1
© SIRSOFT
현재 페이지 제일 처음으로