다음/이전 링크를 사용하여 여러 Bootstrap3 모달을 순환시키는 방법

Question

현재 열려있는 모달 내부의 다음 및 이전 링크를 통해 여러 Bootstrap3 모달을 순환하려고합니다. 내가 가지고있는 스크립트는 '다음'을 클릭하거나 '이전'을 클릭하면 이전 모달로 돌아가서 다음 모달로 이동하지만 모달을 숨기기 위해 data-dismiss = "모달"기능을 사용할 수는 없습니다. 게다가, 제 JQuery는 오히려 해커처럼 보입니다. 더 좋은 방법이 있습니까? 도움을 환영합니다.

<button class="text-link" data-toggle="modal" data-target="#modalOne">Modal One</button> 
<div class="modal fade default-modal" tabindex="-1" role="dialog" id="modalOne"> 
    <div class="modal-dialog modal-md" role="document"> 
     <div class="modal-content"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i></button> 
      <a class="next"></a> 
      <a class="prev"></a> 
      <div class="modal-body"> 
      Hello Earth 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

<button class="text-link" data-toggle="modal" data-target="#modalTwo">Modal Two</button> 
<div class="modal fade default-modal" tabindex="-1" role="dialog" id="modalTwo"> 
    <div class="modal-dialog modal-md" role="document"> 
     <div class="modal-content"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i></button> 
      <a class="next"></a> 
      <a class="prev"></a> 
      <div class="modal-body"> 
      Hello Mars 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 


$(document).ready(function() { 
    $('a.next').on('click', function() { 
     $(this).closest('.modal').css("display", "none"); 
     $(this).closest('.modal').removeClass('in').next().addClass('in').css("display", "block"); 
    }); 
    $('a.prev').on('click', function() { 
     $(this).closest('.modal').css("display", "none"); 
     $(this).closest('.modal').removeClass('in').prev().addClass('in').css("display", "block"); 
    }); 
}); 

Answer 1

당신은 modal의 내장 쇼 숨기기 기능을 사용하려고 말할 수 :

$(document).ready(function() { 
    $('a.next').on('click', function() { 
     let dialog = $(this).closest('.modal'); 
     dialog.modal('hide'); 
     dialog.next().modal('show'); 
    }); 
    $('a.prev').on('click', function() { 
     let dialog = $(this).closest('.modal'); 
     dialog.modal('hide'); 
     dialog.prev().modal('show'); 
    }); 
});