[javascript] 부트 스트랩 모달 : 전류 폐쇄, 새로 열기

Program / 글쓴이

잠시 동안 찾았지만 이에 대한 해결책을 찾을 수 없습니다. 다음을 원합니다.

  • 부트 스트랩 모달 내에서 URL을 엽니 다. 나는이 과정에서 일하고 있습니다. 따라서 콘텐츠가 동적으로로드됩니다.
  • 사용자가이 모달 내부의 버튼을 누르면 현재 모달을 숨기고 그 직후에 사용자가 클릭 한 새 URL로 새 모달이 열리기를 원합니다. 두 번째 모달의이 내용도 동적으로로드됩니다.
  • 사용자가 두 번째 모달을 닫으면 첫 번째 모달이 다시 돌아와야합니다.

나는 이것을 며칠 동안 쳐다보고 있었고 누군가가 나를 도울 수 있기를 바랍니다.

미리 감사드립니다.

답변

특정 코드를 보지 않고는 정확한 답을 제공하기가 어렵습니다. 그러나 Bootstrap 문서에서 다음과 같이 모달을 숨길 수 있습니다.

$('#myModal').modal('hide')

그런 다음 숨겨지면 다른 모달을 표시합니다.

$('#myModal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#myModalNew').modal('show')
})

URL을 새 모달 창으로 푸시하는 방법을 찾아야하지만, 그게 사소하다고 생각합니다. 코드를 보지 않고는 예제를 제공하기가 어렵습니다.

답변

나는 이것이 늦은 대답이라는 것을 알고 있지만 유용 할 수 있습니다. @karima가 위에서 언급했듯이이 작업을 수행하는 적절하고 깨끗한 방법이 있습니다. 실제로 한 번에 두 개의 함수를 실행할 수 있습니다. trigger그리고 dismiss모달.

HTML 마크 업;

<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>

<div class="modal fade" id="SELECTOR" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body"> ... </div>
     <div class="modal-footer">           <!-- ↓ -->  <!--      ↓      -->
      <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
     </div>
   </div>
  </div>
</div>

데모

답변

정확한 응답은 아니지만 현재 모달을 닫고 새 모달을 열 때 유용합니다.

같은 버튼의 html에서 data-dismiss로 현재 모달을 닫고 data-target으로 직접 새 모달을 열도록 요청할 수 있습니다.

<button class="btn btn-success"
data-toggle="modal"
data-target="#modalRegistration"
data-dismiss="modal">Register</button>

답변

문제 data-dismiss="modal"는 콘텐츠가 왼쪽으로 이동한다는 것입니다.

나는 나를 위해 일한 것을 공유하고 pop1있습니다.pop2

JS 코드

var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
    if (showPopup2) {
        $('#popup2').modal('show');
        showPopup2 = false;
    }
});

$("#popup2").click(function() {
    $('#popup1').modal('hide');
    showPopup2 = true;
});

답변

이 방법을 사용합니다.

$(function() {
  return $(".modal").on("show.bs.modal", function() {
    var curModal;
    curModal = this;
    $(".modal").each(function() {
      if (this !== curModal) {
        $(this).modal("hide");
      }
    });
  });
});

답변

다음 코드를 사용하여 첫 번째 모달을 숨기고 두 번째 모달을 즉시 열 수 있으며 동일한 전략을 사용하여 두 번째 모달을 숨기고 첫 번째 모달을 표시 할 수 있습니다. 

$("#buttonId").on("click", function(){
    $("#currentModalId").modal("hide");
    $("#currentModalId").on("hidden.bs.modal",function(){
    $("#newModalId").modal("show");
    });
});

답변

이 기능을 추가하려는 링크 또는 버튼에 다음 속성을 추가해야합니다. 

 data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"

상세 블로그 : http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/