Bootstrap: Otwórz inny modal w trybie modalnym

95

Tak więc używam tego kodu, aby otworzyć inne okno modalne w aktualnie otwartym oknie modalnym:

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

Dzieje się tak, że przez około 500 ms pasek przewijania będzie się duplikował. Myślę, że obecny modal wciąż zanika. Jednak wygląda to na bardzo nierówne i zacinające się.

Byłbym wdzięczny za wszelkie sugestie dotyczące rozwiązania tego problemu.

Czy sposób budowania tego w wydarzeniu onclick jest nieprofesjonalny?

Pracuję z wersją bootstrap 3.0.

Edycja: Myślę, że konieczne jest skrócenie czasu zanikania modalu. Jak to jest możliwe?

javascript jquery twitter-bootstrap modal-dialog twitter-bootstrap-3 AlexioVay
źródło
3
Działający przykład można znaleźć na bootply.com/lvKQA2AM28
CrandellWS,

Odpowiedzi:

86

Moje rozwiązanie nie zamyka dolnego modalu, ale naprawdę układa się na nim. Prawidłowo zachowuje zachowanie przewijania. Testowane w Bootstrap 3. Aby modały ustawiały się w stos zgodnie z oczekiwaniami, musisz ustawić je w swoim znaczniku HTML w kolejności od najniższej do najwyższej.

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

AKTUALIZACJA: Po ułożeniu modali wszystkie tła pojawiają się poniżej najniższego modalu. Możesz to naprawić, dodając następujący kod CSS:

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

Spowoduje to pojawienie się tła modalnego poniżej najwyższego widocznego modalu. W ten sposób szarzeje twoje niższe modały pod spodem.

H Dog
źródło
2
Elementy później w znaczniku strony mają naturalnie wyższy indeks Z i będą układane na wierzchu elementów, które pojawiły się wcześniej w znaczniku. Chyba że ustawisz jawny indeks z.
H Dog
1
@H Pies: dokładnie to, czego potrzebowałem :) działa idealnie. dzięki!
Tobias Koller
2
Naprawdę legendarne !! Przewracałem się, gdy ktoś zasugerował użycie wtyczki tylko do tego ... po prostu chciałem mieć proste rozwiązanie prostego problemu i gotowe ... Pozdrawiam!
Fr0zenFyr
2
Wielkie dzięki, za WASZĄ pomoc. Twoje rozwiązanie zostało rozwiązane mój problem, kiedy używam dwóch modali w tym samym czasie !!!!!
Levon
3
Javascript działał w Bootstrap 4, jednak CSS nie. Zamiast tego ukryłem tło i dodałem .modal: after {content: ""; Blok wyświetlacza; tło: rgba (0,0,0, .5); pozycja: stała; góra: 0; dół: 0; szerokość: 100%; indeks z: -1; }
Jason G.
86

data-dismiss zamyka aktualne okno modalne

data-toggleotwiera nowy modal z hrefzawartością w nim

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

lub

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

daj nam znać, czy to działa.

jayeshkv
źródło
Dzięki, działa i unika używania „onclick”. Ale animatiom nadal na sekundę podwaja pasek przewijania.
AlexioVay,
@ user2829128 to właśnie data-dismissrobi. Zamyka bieżące okno i otwiera nowe. Czy możesz wysłać swój kod w bootplylub jsfiddle?
jayeshkv
14
Przewijanie nie działałoby na drugim module, jeśli wysokość jest długa.
Giraldi
To samo dotyczy bootstrap v4. Kiedy klikam przycisk na pierwszym mondalu, otwiera się kolejny modal, drugi modal pokazuje się z przewijaniem ciała. Problem dotyczy klasy .modal-open for body. Usuwa się, gdy klikniemy i nie dodamy ponownie.
fdrv
7
.modal { overflow-y: auto }rozwiązuje problem przewijania BS4.
Riki137
19

Spróbuj tego

<!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>
Rozwiń fragment

Elon Gomes Vieira
źródło
1
fail for me .. = (modal działa, ale jeśli 1. modal jest długi, pojawia się przewijanie pierwszego modalu i kiedy otworzysz 2. modal i zamkniesz go, pierwszy modal scroll nie zadziała.
Vincent Dapiton
Dziękuję bardzo, to była wielka pomoc :)
Daniel Muñoz
17

Możesz faktycznie wykryć, kiedy stary modal się zamyka, wywołując hidden.bs.modal zdarzenie:

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

    });

Więcej informacji: http://getbootstrap.com/javascript/#modals-events

Giraldi
źródło
15

Aktualizacja na 2018 rok - przy użyciu Bootstrap 4

Zauważyłem, że większość odpowiedzi zawiera dużo niepotrzebnego jQuery. Aby otworzyć modal z innego modalu, można po prostu użyć zdarzeń, które zapewnia Bootstrap, takich jak show.bs.modal. Możesz również chcieć, aby niektóre arkusze CSS obsługiwały nakładki tła. Oto 3 otwarte modalne z innych scenariuszy ...

Otwórz modal z innego modalu (pozostaw pierwszy modal otwarty)

<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>

Potencjalnym problemem w tym przypadku jest to, że tło z drugiego modułu ukrywa pierwszy moduł. Aby temu zapobiec, utwórz drugi modal data-backdrop="static"i dodaj trochę CSS, aby naprawić indeksy z tła ...

/* 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

Otwórz modal z innego modalu (zamknij pierwszy modal)

Jest to podobne do powyższego scenariusza, ale ponieważ zamykamy pierwszy modal, gdy drugi jest otwarty, nie ma potrzeby poprawiania tła CSS. Prosta funkcja obsługująca drugie show.bs.modalzdarzenie modalne zamyka pierwszy modal.

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

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

Otwórz modal w środku innego modalu

Ostatnim scenariuszem z wieloma trybami jest otwarcie drugiego modalu wewnątrz pierwszego modalu. W tym przypadku znacznik drugiego miejsca jest umieszczony wewnątrz pierwszego. Nie jest potrzebny żaden dodatkowy CSS ani 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

Zim
źródło
Nie działa w Bootstrap 4. Kiedy zamkniesz drugi modal, pierwszy nie będzie już przewijał się.
Justin
@Justin - nie widzę konkretnego scenariusza, który to demonstruje, a przewijanie wykracza poza zakres oryginalnego pytania. Proponuję poszukać lub zadać inne pytanie dotyczące przewijania.
Zim
nth-of-type nie działa dla mnie, ponieważ nie wygląda na klasę. Współpracuję z: .modal-backdrop.show + .modal.show { z-index: 1052 !important; } .modal-backdrop.show + .modal.show + .modal-backdrop.show { z-index: 1051 !important; }
webhead
14

Modały w trybie modalnym:

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

RedDevil2015
źródło
fail for me .. = (modal działa, ale jeśli 1. modal jest długi, pojawia się przewijanie pierwszego modalu i kiedy otwierasz 2. modal i
zamykasz
Przykład powyżej odradza się modalnie zamiast pierwszego modalu nie na wierzchu ani w (pierwszy nie jest już widoczny).
JackTheKnife
Bardzo ładny efekt.
Jorge B.
Jak można wykorzystać Twoje rozwiązanie w Semantic UI?
vahidsamimi
9

Pracuję nad projektem, który ma wiele modali wywołujących inne modale i kilku facetów HTML, którzy mogą nie wiedzieć, jak inicjować go za każdym razem dla każdego przycisku. Doszedł do podobnego wniosku, co @gmaggio, niechętnie po tym, jak najpierw przeszedł długą drogę.

EDYCJA: Teraz obsługuje modale wywoływane przez javascript.

EDYCJA: Teraz działa otwieranie przewijanego modalu z innego modalu.

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

Po prostu umieść przycisk wywoływania modalnego w normalny sposób, a jeśli zostanie odebrany jako znajdujący się wewnątrz modalu, zamknie on najpierw bieżący, zanim otworzy ten określony w celu danych. Zauważ, że relatedTargetjest dostarczane przez Bootstrap.

Dodałem również, aby nieco wygładzić zanikanie: Jestem pewien, że można zrobić więcej.

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}
Ren
źródło
Nie w 100% twój problem, ale pokazany hak modalny jest trochę przydatny. Zarządzanie klasą body.modal-open wydaje się być błędne w BS v.3.3.5, po zamknięciu jednego modalu i otwarciu innego go brakuje i dlatego tło przewija się zamiast (drugiego) modalu. Twój hook może naprawić to zachowanie.
Manuel Arwed Schmidt
7

Dokumenty na Twitterze mówią, że wymagany jest niestandardowy kod ...

Działa to bez dodatkowego JavaScript, jednak niestandardowy CSS byłby wysoce zalecany ...

<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 -->
Rozwiń fragment

CrandellWS
źródło
1
Oto kolejny przykład z prawidłowo sformatowanym drugim modalem bootply.com/qRsvPSrcO5
Zim
1
@Skelly zmiana indeksu Z, tak jak w przypadku css, to dobry pomysł ...z-index: 1080 !important;
CrandellWS
4
Jeśli otworzysz drugi modal i klikniesz poza nim, zostanie on zablokowany. (Chrome, najnowsze)
Martin Braun
może się mylę, ale uważam, że doktorzy mówią, aby nie umieszczać modalu w modalu, więc nie jest to zaskakujące
CrandellWS
7

W przypadku bootstrap 4, aby rozwinąć odpowiedź @ helloroy, użyłem następującego; -

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-- ;
});

Zaletą powyższego jest to, że nie ma żadnego efektu, gdy jest tylko jeden modal, działa tylko dla wielokrotności. Po drugie, przekazuje obsługę ciału, aby zapewnić, że przyszłe modały, które nie są obecnie generowane, są nadal obsługiwane.

Aktualizacja

Przejście do połączonego rozwiązania js / css poprawia wygląd - animacja zanikania nadal działa w tle; -

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-- ;
});

w połączeniu z następującym 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 ;
}

To poradzi sobie z modami zagnieżdżonymi do 4 głębokości, czyli więcej niż potrzebuję.

smartbloke
źródło
Nie działa w Bootstrap 4. Kiedy zamkniesz drugi modal, pierwszy nie będzie już przewijał się.
Justin
4

Spróbuj tego:

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

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

Ten prosty hack działa dla mnie.

chrześcijanin
źródło
4

Dla kogoś, kto używa bootstrap 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>
Rozwiń fragment

helloroy
źródło
To świetnie, jedynym problemem, jaki pozostał, jest zapobieganie ponownemu pojawianiu się paska przewijania, gdy najwyższy modal jest zamknięty
HyperActive
2

Miałem też problemy z przewijanymi modami, więc zrobiłem coś takiego:

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

Będzie służyć dla każdego modalu , który pojawi się. Zauważ, że pierwsza jest zamknięta, więc druga może się pojawić. Brak zmian w strukturze Bootstrap.

teefars
źródło
2

Poszedłem razem trochę inną trasą, postanowiłem ich „De-Nest”. Może komuś to się przyda ...

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.
Dylan Hayes
źródło
Dziękuję bardzo
2

Mój kod działa dobrze przy użyciu odrzucania danych.

<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
źródło
1

Zamknij pierwszy modal Bootstrap i dynamicznie otwórz nowy modal.

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);
Abhishek
źródło
1

Dlaczego po prostu nie zmienić treści korpusu modalnego?

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

W oknie modalnym po prostu umieść link lub przycisk

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

Jeśli chcesz po prostu przełączyć się między 2 trybami:

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

W oknie modalnym po prostu umieść link lub przycisk

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>
Carlo
źródło
To bardziej jak odpowiedź związana z UX, ponieważ potrzebowałem jej, aby wyświetlić komunikat o błędzie dotyczący modalu # 1. Więc modal # 2 miał komunikat o błędzie. Ale minęły wieki, odkąd zadałem to pytanie i teraz robię tego rodzaju rzeczy inaczej.
AlexioVay
0

Spróbuj tego:

$('.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
źródło
0

Odpowiedź udzielona przez H Dog jest świetna, ale to podejście dawało mi trochę migotania modalnego w Internet Explorerze 11. Bootstrap najpierw ukryje modal, usuwając klasę „modal-open”, a następnie (używając rozwiązania H Dogs) dodamy klasa „modal-open” ponownie. Podejrzewam, że w jakiś sposób powoduje to migotanie, które widziałem, być może z powodu powolnego renderowania HTML / CSS.

Innym rozwiązaniem jest przede wszystkim zapobieganie usuwaniu przez bootstrap klasy „modal-open” z elementu body. Używając Bootstrap 3.3.7, to nadpisanie wewnętrznej funkcji hideModal działa idealnie dla mnie.

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

W tym zastąpieniu klasa „modal-open” jest usuwana tylko wtedy, gdy na ekranie nie ma widocznych modali. I zapobiegasz jednej klatce usuwania i dodawania klasy do elementu body.

Po prostu dołącz nadpisanie po załadowaniu bootstrapu.

Adam
źródło
-4 

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

Alex Sh.
źródło