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

95

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

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

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

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

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

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

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

javascript  jquery  twitter-bootstrap  modal-dialog  twitter-bootstrap-3 
— AlexioVay
소스
3
동작하는 예제에서 확인할 수 있습니다 bootply.com/lvKQA2AM28
— CrandellWS

답변:

86

내 솔루션은 하단 모달을 닫지 않지만 실제로 그 위에 쌓입니다. 스크롤 동작을 올바르게 유지합니다. 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);
}

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

— H 개
소스
2
페이지 마크 업의 뒷부분에있는 항목은 자연스럽게 더 높은 Z- 색인을 가지며 마크 업의 앞부분에 나타난 항목 위에 쌓입니다. 명시적인 Z- 색인을 설정하지 않는 한.
— H Dog
1
@H Dog : 정확히 내가 필요한 것 :) 완벽하게 작동합니다. 감사!
— Tobias Koller 2016
2
정말 전설적인 !! 누군가가 플러그인 사용을 제안 할 때마다 나는 뒤집 었습니다 ... 단순한 문제에 대한 간단한 해결책을 원했고 거기에 있습니다 ... 건배!
— Fr0zenFyr
2
도움을 주셔서 감사합니다. 두 개의 모달을 동시에 사용할 때 귀하의 솔루션이 내 문제를 해결했습니다 !!!!!
— Levon
3
Javascript는 Bootstrap 4에서 작동했지만 CSS는 작동하지 않았습니다. 대신 배경을 숨긴 다음 .modal : after {content : ""; 디스플레이 : 블록; 배경 : rgba (0,0,0, .5); 위치 : 고정; 상단 : 0; 하단 : 0; 너비 : 100 %; Z- 색인 : -1; }
— 제이슨 G.
86

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>

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

— Jayeshkv
소스
감사합니다. 작동하며 "onclick"을 사용하지 않습니다. 그러나 애니메이션은 여전히 ​​1 초 동안 스크롤바를 두 배로 늘립니다.
— AlexioVay
@ user2829128 그게 뭐야 data-dismiss. 현재 창을 닫고 새 창을 엽니 다. bootply또는에 코드를 게시 할 수 있습니까 jsfiddle?
— jayeshkv
14
높이가 길면 두 번째 모달에서 스크롤이 작동하지 않습니다.
— Giraldi
여기 부트 스트랩 v4와 동일합니다. 첫 번째 모달에서 버튼을 클릭하면 다른 모달이 열리고 두 번째 모달은 본문 스크롤과 함께 표시됩니다. 문제는 body에 대한 .modal-open 클래스에 있습니다. 클릭하면 제거되고 다시 추가되지 않습니다.
— fdrv
7
.modal { overflow-y: auto }BS4 스크롤링 문제를 해결합니다.
— Riki137
19

이 시도

<!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>
스 니펫 확장

— 엘론 고메스 비에이라
소스
1
fail for me .. = (모달은 작동하지만 첫 번째 모달이 길면 첫 번째 모달에 대한 스크롤이 나타나고 두 번째 모달을 열고 닫으면 첫 번째 모달 스크롤이 작동하지 않습니다.
— Vincent Dapiton
그것이 큰 도움이 :)이었다, 대단히 감사합니다
— 다니엘 무 노즈
17

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

— 히 랄디
소스
15

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

— 짐
소스
Bootstrap 4에서는 작동하지 않습니다. 두 번째 모달을 닫으면 첫 번째 모달이 더 이상 스크롤 할 수 없습니다.
— 저스틴
@Justin-나는 이것을 보여주는 특정 시나리오를 보지 못했으며 스크롤은 원래 질문의 범위를 벗어났습니다. 스크롤 문제와 관련된 다른 질문을 찾거나 물어 보는 것이 좋습니다.
— Zim
nth-of-type은 수업을 보지 않기 때문에 나를 위해 작동하지 않았습니다. 나는 그것을 함께 일했다 : .modal-backdrop.show + .modal.show { z-index: 1052 !important; } .modal-backdrop.show + .modal.show + .modal-backdrop.show { z-index: 1051 !important; }
— webhead
14

모달의 모달 :

$('.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>
스 니펫 확장

— 레드 데빌 2015
소스
fail for me .. = (모달이 작동하지만 첫 번째 모달이 길면 첫 번째 모달에 대한 스크롤이 나타나고 두 번째 모달을 열고 닫으면 첫 번째 모달 스크롤이 작동하지 않습니다.
— Vincent Dapiton
위의 예는 맨 위에 있지 않은 첫 번째 모달 대신 모달을 생성합니다 (첫 번째 모달은 더 이상 표시되지 않음).
— JackTheKnife
아주 좋은 효과.
— Jorge B.
시맨틱 UI에서 솔루션을 어떻게 사용할 수 있습니까?
— vahidsamimi
9

다른 모달을 호출하는 모달이 많은 프로젝트와 각 버튼에 대해 매번 시작하는 것을 알지 못하는 HTML 녀석이있는 프로젝트에서 작업합니다. @gmaggio와 비슷한 결론에 도달했습니다.

편집 : 이제 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;
}
— Ren
소스
100 % 문제는 아니지만 shown.bs.modal 후크가 편리합니다. body.modal-open 클래스의 관리는 BS v.3.3.5에서 버그가있는 것처럼 보입니다. 하나의 모달을 닫고 다른 모달을 연 후에는 누락되어 (두 번째) 모달 대신 배경이 스크롤됩니다. 당신의 Hook은 그 행동을 고칠 수 있습니다.
— Manuel Arwed Schmidt 2015-06-28
7

Twitter 문서에 맞춤 코드가 필요하다고 나와 있습니다 ...

이것은 추가 JavaScript없이 작동하지만 사용자 정의 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 -->
스 니펫 확장

— CrandellWS
소스
1
다음은 두 번째 모달이 올바르게 포맷 된 또 다른 예입니다. bootply.com/qRsvPSrcO5
— Zim
1
당신은 CSS에서 그랬던 것처럼 @Skelly ... 좋은 아이디어 Z- 인덱스입니다 변경z-index: 1080 !important;
— CrandellWS
4
두 번째 모달을 열고 바깥 쪽을 클릭하면 버그가 발생합니다. (Chrome, 최신)
— Martin Braun
어쩌면 내가 틀렸을 수도 있지만 문서가 모달에 모달을 넣지 말라고 말하고 있다고 믿습니다. 그래서 그것은 놀라운
— CrandellWS
7

부트 스트랩 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 깊이까지 중첩 된 모달을 처리 할 것입니다.

— 스마트 블로크
소스
Bootstrap 4에서는 작동하지 않습니다. 두 번째 모달을 닫으면 첫 번째 모달이 더 이상 스크롤 할 수 없습니다.
— 저스틴
4

이 시도:

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

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

이 간단한 해킹은 저에게 효과적입니다.

— 신자
소스
4

부트 스트랩 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>
스 니펫 확장

— 헬로 로이
소스
이것은 훌륭합니다. 남은 유일한 문제는 최상위 모달이 닫 혔을 때 스크롤 막대가 다시 나타나지 않도록하는 것입니다.
— HyperActive
2

스크롤 가능한 모달에도 문제가 있었기 때문에 다음과 같이했습니다.

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

그것은 나타나는 모달 을 포함 하는 모달에 대해 제공됩니다. 첫 번째는 닫혀 있으므로 두 번째는 나타날 수 있습니다. 부트 스트랩 구조는 변경되지 않습니다.

— 티 파스
소스
2

나는 모두 함께 다른 길을 갔다. 나는 그들을 "De-Nest"하기로 결정했다. 누군가가 이것을 편리하게 찾을 수 있습니다 ...

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.
— 딜런 헤이즈
소스
대단히 감사합니다
2

내 코드는 data-dismiss를 사용하여 잘 작동합니다.

<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>
— user3675926
소스
1

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

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);
— 아비 섹
소스
1

모달 본문의 내용 만 변경하지 않는 이유는 무엇입니까?

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

모달에 링크 나 버튼을 넣어

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

2 개의 모달 사이에서 전환하려는 경우 :

    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>
— 카를로
소스
Modal # 1에 관한 오류 메시지를 표시하는 데 필요했기 때문에 UX 관련 답변과 비슷합니다. 따라서 모달 # 2에는 오류 메시지가 있습니다. 하지만 제가이 질문을 한 이후로 지금은 몇 년이 지났고 지금은 이런 종류의 일을 다르게하고 있습니다.
— AlexioVay
0

이 시도:

$('.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)
  }
});
— Rakesh Vadnal
소스
0

H Dog의 대답 가 은 훌륭하지만이 접근 방식은 실제로 Internet Explorer 11에서 모달 깜박임을 제공했습니다. 부트 스트랩은 먼저 'modal-open'클래스를 제거하는 모달을 숨긴 다음 H Dogs 솔루션을 사용하여 다음을 추가합니다. 다시 '모달 오픈'클래스. 나는 이것이 어떻게 든 느린 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'클래스는 화면에 보이는 모달이없는 경우에만 제거됩니다. 그리고 body 요소에 클래스를 제거하고 추가하는 한 프레임을 방지합니다.

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

— 아담
소스
-4 

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

— Alex Sh.
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.