source

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

ittop 2023. 8. 26. 00:01
반응형

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

그래서 이 코드를 사용하여 현재 열려 있는 모달 창에서 다른 모달 창을 엽니다.

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

약 500ms 동안 스크롤 막대가 복제됩니다.지금의 모달이 아직 희미해지고 있기 때문인 것 같습니다.하지만 그것은 매우 매끄럽지 않고 더듬거리는 것처럼 보입니다.

이 문제를 해결하기 위해 어떤 제안이라도 해주시면 감사하겠습니다.

또한 클릭 이벤트에서 이것을 구축하는 방법은 비전문적입니까?

부트스트랩 버전 3.0으로 작업 중입니다.

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

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>

효과가 있는지 알려주세요.

  • 또한 Modal Documentation을 둘러보는 것도 좋습니다.

저의 솔루션은 하위 모달을 닫지 않고 그 위에 쌓입니다.스크롤 동작을 올바르게 유지합니다.부트스트랩 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);
}

이렇게 하면 맨 위에 가장 잘 보이는 모달 아래에 모달 배경이 나타납니다.그렇게 하면 아래쪽 모델이 회색으로 변합니다.

부트스트랩 5 (베타) - 2021년 업데이트

모델의 기본 z 인덱스가 1060으로 변경되었습니다.따라서 모델 및 배경 사용을 재정의하려면 다음과 같이 하십시오.

.modal:nth-of-type(even) {
    z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1061 !important;
}

부트스트랩 5개 다중 모드

부트스트랩 4 - 2019년 업데이트

대부분의 답변에 불필요한 jQuery가 많은 것 같습니다.다른 모달에서 모달을 여는 것은 부트스트랩이 제공하는 다음과 같은 이벤트를 사용하여 간단히 수행할 수 있습니다.show.bs.modal또한 일부 CSS가 배경 오버레이를 처리하기를 원할 수도 있습니다.여기 세 가지 "다중 모델" 시나리오가 있습니다.

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

<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"배경의 Z 인덱스를 수정하기 위해 CSS를 추가합니다.

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

https://codeply.com/go/NiFzSCukVl

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

하지만, 시 CSS 없습니다. 시 차 오 와 차 위 유 1때 시 배 경 에 CSS 수 다 입니다.show.bs.modal는 첫 modalevent를 .

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

https://codeply.com/go/ejaUJ4YANz

다른 모달 내부에서 모달 열기

마지막 다중 모달 시나리오는 첫 번째 모달 내부의 두 번째 모달을 여는 것입니다.이 경우 두 번째 마크업은 첫 번째 마크업 안에 배치됩니다.추가 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://codeply.com/go/iSbjqubiyn

있는 창에서 , 재려열있모현창다에른모창열면려을,
부트스트랩 제거 기능을 사용할 수 있습니다.

부트스트랩-모달 데모

이것을 먹어보세요.

<!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-modals-moduls

모달의 모달 모드:

$('.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>

다른 모델을 호출하는 많은 모델과 각 버튼에 대해 매번 시작할 수 없는 몇 명의 HTML 사용자가 있는 프로젝트에서 작업합니다.@gmaggio와 비슷한 결론에 도달했습니다, 먼저 먼 길을 돌아본 후에, 유감스럽게도.

EDIT: Javascript를 통해 호출되는 모드를 지원합니다.

편집: 이제 다른 모달에서 스크롤 모달을 엽니다.

$(document).on('show.bs.modal', function (event) {
    if (!event.relatedTarget) {
        $('.modal').not(event.target).modal('hide');
    };
    if ($(event.relatedTarget).parents('.modal').length > 0) {
        $(event.relatedTarget).parents('.modal').modal('hide');
    };
});

$(document).on('shown.bs.modal', function (event) {
    if ($('body').hasClass('modal-open') == false) {
        $('body').addClass('modal-open');
    };
});

일반적으로 모드 호출 버튼을 배치하기만 하면 모드 안에 있는 것으로 선택되면 데이터 대상에 지정된 버튼을 열기 전에 현재 버튼을 먼저 닫습니다.:relatedTarget부트스트랩에서 제공합니다.

또한 페이딩을 조금 부드럽게 하기 위해 다음을 추가했습니다.하지만 저는 더 많은 일을 할 수 있다고 확신합니다.

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}

부트스트랩 4의 경우, @helloroy의 답변을 확장하기 위해 다음을 사용했습니다;-

var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e) {
    if ( modal_lv > 0 )
    {
        $('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
        $(e.target).css('zIndex',1051+modal_lv) ;
    }
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

위의 장점은 모달이 하나만 있을 때는 효과가 없고 여러 개만 시작된다는 것입니다.둘째, 현재 생성되지 않은 미래의 모델에 대한 요구 사항이 충족되도록 차체에 핸들링을 위임합니다.

갱신하다

js/css 결합 솔루션으로 이동하면 외관이 개선됩니다. 배경에서 페이드 애니메이션이 계속 작동합니다.

var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e) {
    if ( modal_lv > 0 )
        $(e.target).css('zIndex',1051+modal_lv) ;
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

다음의 css와 결합;-

.modal-backdrop ~ .modal-backdrop
{
    z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1053 ;
}

이것은 내가 필요로 하는 것보다 더 많은 4개의 깊이까지 중첩된 모델을 처리할 것입니다.

Twitter 문서에서 사용자 지정 코드가 필요하다고 합니다.

이것은 별도의 자바스크립트 없이 작동하지만, 맞춤형 CSS를 적극 추천합니다.

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal">
      Launch demo modal
    </button> 
            <!-- Modal -->
            <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true">
    
              <div class="modal-dialog">
          
                <div class="modal-content  bg-info">
                  <div class="modal-header btn-info">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="modalOneLabel">modalOne</h4>
                  </div>
                  <div id="thismodalOne" class="modal-body bg-info">
                
                
              <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample">
      Launch demo modal
    </button>
             
                    <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true">
                <h3>EXAMPLE</h3>
            </div>
                  </div>
                  <div class="modal-footer btn-info" id="woModalFoot">
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
    <!-- End Form Modals -->

사용해 보십시오.

// Hide the login modal
$('#login').modal('hide');

// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);

이 간단한 해킹은 저에게 효과가 있습니다.

부트스트랩 4 https://jsfiddle.net/helloroy/tmm9juoh/ 를 사용하는 사용자용

var modal_lv = 0;
$('.modal').on('shown.bs.modal', function (e) {
    $('.modal-backdrop:last').css('zIndex',1051+modal_lv);
    $(e.currentTarget).css('zIndex',1052+modal_lv);
    modal_lv++
});

$('.modal').on('hidden.bs.modal', function (e) {
    modal_lv--
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a">
  Launch demo modal a
</button>

<div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b">
  Launch another demo modal b
</button>
<p class="my-3">
Not good for fade In.
</p>
<p class="my-3">
who help to improve?
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c">
  Launch another demo modal c
</button>
<p class="my-3">
But good enough for static modal
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
<p class="my-3">That's all.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

저는 함께 다른 길을 갔습니다. 저는 그들을 "데-네스트"하기로 결정했습니다.누군가 이걸 유용하게 쓸 수 있을지도...

var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal");     //get reference to nested modal
$m1.after($innermodal);                  // snatch it out of inner modal and put it after.

이 코드를 사용하여 두 개 이상의 모달을 사용할 수 있습니다(이 샘플은 세 개의 모달 사용).

    $('.modal').on('shown.bs.modal', function (e) {
        $('.modal.show').each(function (index) {
            $(this).css('z-index', 1101 + index*2);
        });
        $('.modal-backdrop').each(function (index) {
            $(this).css('z-index', 1101 + index*2-1);
        });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>



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

<div class="modal" id="myModal1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal 1</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                <p>
                    Content 1.
                </p>
                <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>

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

<div class="modal" id="myModal3">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal 3</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                <p>
                    modal 3
                </p>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>

스크롤 가능한 모델에도 문제가 있어서 다음과 같은 작업을 수행했습니다.

  $('.modal').on('shown.bs.modal', function () {
    $('body').addClass('modal-open');
    // BS adds some padding-right to acomodate the scrollbar at right
    $('body').removeAttr('style');
  })

  $(".modal [data-toggle='modal']").click(function(){
    $(this).closest(".modal").modal('hide');
  });

나타나는 모달 내의 모달에 사용할 수 있습니다.첫 번째는 닫혀서 두 번째가 나타날 수 있습니다.부트스트랩 구조에 변경 사항이 없습니다.

그냥 모달 본문의 내용을 바꾸는 게 어때요?

    window.switchContent = function(myFile){
        $('.modal-body').load(myFile);
    };

모달에 링크나 버튼을 넣기만 하면 됩니다.

    <a href="Javascript: switchContent('myFile.html'); return false;">
     click here to load another file</a>

두 가지 모델 사이에서 전환하려는 경우:

    window.switchModal = function(){
        $('#myModal-1').modal('hide');
        setTimeout(function(){ $('#myModal-2').modal(); }, 500);
        // the setTimeout avoid all problems with scrollbars
    };

모달에 링크나 버튼을 넣기만 하면 됩니다.

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>

내 코드는 데이터 디스를 사용하여 잘 작동합니다.

<li class="step1">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
        <p class="text-label">Step 1</p>
        <p class="text-text">Plan your Regime</p>
    </a>

</li>
<li class="step2">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
        <p class="text-label">Step 2</p>
        <p class="text-text">Plan your menu</p>
    </a>
</li>
<li class="step3 active">
    <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
        <p class="text-label">Step 3</p>
        <p class="text-text">This Step is Undone.</p>
    </a>
</li>

첫 번째 부트스트랩 모달을 닫고 새 모달을 동적으로 엽니다.

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);

사용해 보십시오.

$('.modal').on('hidden.bs.modal', function () {
//If there are any visible
  if($(".modal:visible").length > 0) {
      //Slap the class on it (wait a moment for things to settle)
      setTimeout(function() {
          $('body').addClass('modal-open');
      },100)
  }
});

이 스레드는 오래되었지만, 구글에서 온 사람들을 위해, 저는 제가 인터넷에서 찾은 모든 대답들로부터 혼합된 솔루션을 가지고 왔습니다.

이렇게 하면 레벨 클래스가 추가됩니다.

$(document).on('show.bs.modal', '.modal', function (event) {
  $(this).addClass(`modal-level-${$('.modal:visible').length}`);
});

SCSS 내부에서 나는 메인 모달과 위에 10개를 지원하는 규칙을 작성했습니다.z-index: 1060팝업이 발생함), 내부에 레벨 수를 추가할 수 있습니다._variables.scss원하는 경우:

@for $level from 0 through 10 {
  .modal-level-#{$level} {
    z-index: $zindex-modal + $level;

    & + .modal-backdrop {
      z-index: $zindex-modal + $level - 1;
    }
  }
}

컨트롤이 엉망이 되므로 모달 내부에 모달을 둘 수 없습니다.제 경우에는 모든 모델이 끝에 있었습니다.body.

그리고 마지막으로 아래 멤버들도 언급했듯이, 모달 하나를 닫은 후에, 당신은 계속해야 합니다.modal-open을 가르치다.body:

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

H Dog가 제시한 대답은 훌륭하지만, 이 접근법은 실제로 Internet Explorer 11에서 저에게 약간의 모달 플리커를 제공했습니다.부트스트랩은 먼저 'modal-open' 클래스를 제거한 후(H Dogs 솔루션을 사용하여) 'modal-open' 클래스를 다시 추가합니다.HTML/CSS 렌더링 속도가 느려서 깜박임이 발생한 것 같습니다.

또 다른 해결책은 우선 body 요소에서 'modal-open' 클래스를 제거하는 부트스트랩을 방지하는 것입니다.Bootstrap 3.3.7을 사용하면 내부 hideModal 함수의 오버라이드가 저에게 완벽하게 작동합니다.

$.fn.modal.Constructor.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {
        if ($(".modal:visible").length === 0) {
            that.$body.removeClass('modal-open')
        }
        that.resetAdjustments()
        that.resetScrollbar()
        that.$element.trigger('hidden.bs.modal')
    })
}

이 재정의에서 'modal-open' 클래스는 화면에 볼 수 있는 모드가 없는 경우에만 제거됩니다.그리고 본문 요소에 클래스를 제거하고 추가하는 한 프레임을 방지할 수 있습니다.

부트스트랩이 로드된 후에는 재정의를 포함하기만 하면 됩니다.

첫 번째 모달을 제대로 닫지 않으면 스크롤 장애가 발생합니다.다음은 부트스트랩 4를 사용한 예입니다.

HTML:

<div class="modal fade" id="modal-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <button onclick="goToModal2">
        Go To Modal 2
      </button>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-2">
<div class="modal-dialog">
    <div class="modal-content">
      <button onclick="goToModal1">
        Go To Modal 1
      </button>
    </div>
  </div>
</div>

Javascript:

function goToModal2(){
  $("#modal-1").modal("hide");
  $("#modal-1").on("hidden.bs.modal", () => {
    $("#modal-2").modal("show");
    $("#modal-1").unbind("hidden.bs.modal");
  });
}

function goToModal1(){
  $("#modal-2").modal("hide");
  $("#modal-2").on("hidden.bs.modal", () => {
    $("#modal-1").modal("show");
    $("#modal-2").unbind("hidden.bs.modal");
  });
}

비록 그것이 최선의 방법은 아니지만요.하지만 그것은 저에게 완벽하게 효과가 있었습니다.

아마, 나쁘지 않을 겁니다.

<style>
#modal2 .modal-content{
box-shadow: 0 0 50px 10px #999 !important;
}
</style>


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

언급URL : https://stackoverflow.com/questions/19528173/bootstrap-open-another-modal-in-modal

반응형

'source' 카테고리의 다른 글

값이 다른 행을 단일 행으로 병합  (0) 2023.08.26
수동으로 npm 취약성을 수정하는 방법은 무엇입니까?  (0) 2023.08.26
두 PHP datetime 개체가 동일한 날짜로 설정되었는지 확인합니다(시간 무시).  (0) 2023.08.26
VBA의 합계 함수  (0) 2023.08.26
PhotoPicker 검색 오류: 오류 도메인=PlugInKit 코드=13  (0) 2023.08.26

'source'의 다른글

  • 현재글부트스트랩: 모달에서 다른 모달 열기

관련글

댓글

티스토리툴바