[javascript] 부트 스트랩 : 모달에서 다른 모달 열기

Program / 글쓴이

따라서이 코드를 사용하여 현재 열린 모달 창에서 다른 모달 창을 엽니 다.

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

무슨 일이 일어나면 500ms 동안 스크롤바가 복제됩니다. 현재 모달이 여전히 희미 해지기 때문인 것 같습니다. 그러나 그것은 매우 부드럽 지 않고 말 더듬어 보입니다.

이 문제를 해결하기위한 제안에 감사드립니다.

또한 onclick-event에서 이것을 만드는 방법이 비전문가입니까?

저는 부트 스트랩 버전 3.0으로 작업하고 있습니다.

편집 : 모달 페이드 아웃 시간을 줄이는 것이 필요하다고 생각합니다. 이것이 어떻게 가능한지?

답변

내 솔루션은 하단 모달을 닫지 않지만 실제로 그 위에 쌓입니다. 스크롤 동작을 올바르게 유지합니다. Bootstrap 3에서 테스트되었습니다. 모달이 예상대로 쌓이려면 Html 마크 업에서 가장 낮은 것부터 가장 높은 것까지 정렬해야합니다.

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

스 니펫 확장

업데이트 : 모달을 쌓았을 때 모든 배경이 가장 낮은 모달 아래에 나타납니다. 다음 CSS를 추가하여 수정할 수 있습니다.

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

이렇게하면 맨 위에 보이는 모달 아래에 모달 배경이 나타납니다. 그렇게하면 아래의 낮은 모달이 회색으로 표시됩니다.

답변

data-dismiss 현재 모달 창을 강제로 닫습니다.

data-toggle로 새로운 모달 열어 href그 안에 내용을

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

또는

<a data-dismiss="modal" onclick="call the new div here">Click</a>

작동하는지 알려주십시오.

답변

현재 열린 모달 창에서 다른 모달 창을 열려면 bootstrap-modal을
사용할 수 있습니다.

부트 스트랩 모달 데모

답변

이 시도

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button>



<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">

      <div class="modal-body">
      	<button type="button" class="btn btn-info btn-lg" data-toggle="modal"      data-target="#test2">Open Modal 2</button>

      </div>
    </div>
  </div>
</div>

<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">

      <div class="modal-body">

        content

      </div>
    </div>
  </div>
</div>


</body>
</html>

스 니펫 확장

답변

hidden.bs.modal이벤트 를 호출하여 이전 모달이 닫히는시기를 실제로 감지 할 수 있습니다 .

    $('.yourButton').click(function(e){
        e.preventDefault();

        $('#yourFirstModal')
            .modal('hide')
            .on('hidden.bs.modal', function (e) {
                $('#yourSecondModal').modal('show');

                $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
            });

    });

자세한 정보 : http://getbootstrap.com/javascript/#modals-events

답변

2018 년 업데이트-부트 스트랩 4 사용

대부분의 답변에는 불필요한 jQuery가 많이있는 것 같습니다. 다른 모달에서 모달을 열려면 부트 스트랩에서 제공하는 show.bs.modal. CSS가 배경 오버레이를 처리하도록 할 수도 있습니다. 다음은 다른 시나리오의 3 가지 오픈 모달입니다 …

다른 모달에서 모달 열기 (첫 번째 모달을 열어 둡니다)

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Modal title</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ...
              <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
          </div>
        </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">2nd Modal title</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ..
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
              <a href="#" class="btn btn-primary">Save changes</a>
            </div>
          </div>
        </div>
</div>

이 경우 잠재적 인 문제는 두 번째 모달의 배경이 첫 번째 모달을 숨기는 것입니다. 이를 방지하려면 두 번째 모달을 만들고 data-backdrop="static"CSS를 추가하여 배경의 Z- 색인을 수정합니다.

/* modal backdrop fix */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://www.codeply.com/go/NiFzSCukVl

다른 모달에서 모달 열기 (첫 번째 모달 닫기)

위의 시나리오와 비슷하지만, 두 번째 모달이 열릴 때 첫 번째 모달이 닫히기 때문에 배경 CSS 수정이 필요하지 않습니다. 두 번째 모달 show.bs.modal이벤트 를 처리하는 간단한 함수 는 첫 번째 모달을 닫습니다.

$("#myModal2").on('show.bs.modal', function (e) {
    $("#myModal1").modal("hide");
});

https://www.codeply.com/go/ejaUJ4YANz

다른 모달 내에서 모달 열기

마지막 다중 모달 시나리오는 첫 번째 모달 내부에서 두 번째 모달을 여는 것입니다. 이 경우 2nd에 대한 마크 업은 1st 안에 배치됩니다. 추가 CSS 또는 jQuery가 필요하지 않습니다.

<div class="modal" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                ...
                <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>

    <div class="modal" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">2nd Modal title</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                    <a href="#" class="btn btn-primary">Save changes</a>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/iSbjqubiyn

답변

모달의 모달 :

$('.modal-child').on('show.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 0);
});

$('.modal-child').on('hidden.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 1);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a>


<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a>
                <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a>
            </div>

        </div>
    </div>
</div>

<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 1</h4>
            </div>
            <div class="modal-body">
                <p>Two modal body…1</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>

<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 2</h4>
            </div>
            <div class="modal-body">
                <p>Modal body…2</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>

스 니펫 확장