Bootstrap: Buka Modal Lain di Modal

95

Jadi, saya menggunakan kode ini untuk membuka jendela modal lain di jendela modal yang sedang dibuka:

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

Apa yang terjadi adalah, bahwa untuk 500ms scrollbar akan menggandakan. Saya kira karena modal saat ini masih memudar. Namun terlihat sangat tidak mulus dan gagap.

Saya sangat menghargai saran untuk mengatasi masalah ini.

Juga, apakah cara membangun ini dalam acara onclick tidak profesional?

Saya bekerja dengan bootstrap versi 3.0.

Sunting: Saya kira itu perlu untuk mengurangi waktu memudar modal. Bagaimana ini mungkin?

javascript jquery twitter-bootstrap modal-dialog twitter-bootstrap-3 AlexioVay
sumber
3
Contoh yang berfungsi dapat ditemukan di bootply.com/lvKQA2AM28
CrandellWS

Jawaban:

86

Solusi saya tidak menutup modal yang lebih rendah, tetapi benar-benar menumpuk di atasnya. Ini mempertahankan perilaku pengguliran dengan benar. Diuji di Bootstrap 3. Agar modals dapat menumpuk seperti yang diharapkan, Anda harus mengaturnya dalam markup Html dari yang terendah ke tertinggi.

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

UPDATE: Ketika Anda telah menumpuk modal, semua latar belakang muncul di bawah modal paling bawah. Anda dapat memperbaikinya dengan menambahkan CSS berikut:

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

Ini akan memberikan tampilan latar belakang modal di bawah modal yang terlihat paling atas. Dengan cara itu, mode bawah Anda menjadi abu-abu.

H Anjing
sumber
2
Item yang nantinya di markup halaman memiliki indeks-z yang lebih tinggi secara alami dan akan menumpuk di atas item yang muncul sebelumnya di markup. Kecuali Anda menyetel indeks-z eksplisit.
H Dog
1
@H Dog: persis seperti yang saya butuhkan :) berfungsi dengan sempurna. Terima kasih!
Tobias Koller
2
Benar-benar legendaris !! Saya membalik setiap kali seseorang menyarankan untuk menggunakan plugin hanya untuk ini ... hanya ingin memiliki solusi sederhana untuk masalah sederhana dan begitulah ... Cheers!
Fr0zenFyr
2
Terima kasih banyak, atas bantuan ANDA. Solusi Anda mengatasi masalah saya, ketika saya menggunakan dua modal pada waktu yang sama !!!!!
Levon
3
Javascript berfungsi untuk Bootstrap 4, namun CSS tidak. Sebagai gantinya saya menyembunyikan latar belakang dan kemudian menambahkan .modal: setelah {content: ""; tampilan: blok; latar belakang: rgba (0,0,0, .5); posisi: tetap; atas: 0; bawah: 0; lebar: 100%; z-indeks: -1; }
Jason G.
86

data-dismiss menutup paksa jendela modal saat ini

data-togglemembuka modal baru dengan hrefkonten di dalamnya

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

atau

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

beri tahu kami jika berhasil.

jayeshkv.dll
sumber
Terima kasih, ini berfungsi dan menghindari penggunaan "onclick". Tapi animatiom masih menggandakan scrollbar sedetik.
AlexioVay
@ user2829128 itulah yang data-dismissdilakukannya. Ini menutup jendela saat ini dan membuka yang baru. Dapatkah Anda memposting kode Anda di bootplyatau jsfiddle?
jayeshkv
14
Pengguliran tidak akan berfungsi pada modal kedua jika tingginya panjang.
Giraldi
Sama di sini dengan bootstrap v4. Ketika saya mengklik tombol pada mondal pertama itu membuka modal lain, modal kedua muncul dengan gulir tubuh. Masalahnya ada di kelas .modal-open for body. Ini menghapus ketika kita mengklik dan tidak menambahkan lagi.
fdrv
7
.modal { overflow-y: auto }memecahkan masalah pengguliran BS4.
Riki137
19

coba ini

<!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>
Luaskan cuplikan

Elon Gomes Vieira
sumber
1
gagal untuk saya .. = (modal berfungsi tetapi jika modal pertama panjang, gulungan untuk modal pertama muncul dan ketika Anda membuka modal ke-2 dan menutupnya, gulir modal pertama gagal berfungsi.
Vincent Dapiton
Terima kasih banyak, itu sangat membantu :)
Daniel Muñoz
17

Anda sebenarnya dapat mendeteksi ketika modal lama ditutup dengan memanggil hidden.bs.modalacara:

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

    });

Untuk info lebih lanjut: http://getbootstrap.com/javascript/#modals-events

Giraldi
sumber
15

Pembaruan untuk 2018 - Menggunakan Bootstrap 4

Saya menemukan sebagian besar jawaban tampaknya memiliki banyak jQuery yang tidak perlu. Untuk membuka modal dari modal lain dapat dilakukan hanya dengan menggunakan event yang disediakan Bootstrap seperti show.bs.modal. Anda mungkin juga menginginkan beberapa CSS untuk menangani hamparan tampilan latar. Berikut adalah 3 modal terbuka dari skenario lain ...

Buka modal dari modal lain (biarkan modal pertama tetap terbuka)

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

Masalah potensial dalam kasus ini adalah bahwa latar belakang dari modal ke-2 menyembunyikan modal pertama. Untuk mencegahnya, buat modal ke-2 data-backdrop="static", dan tambahkan beberapa CSS untuk memperbaiki indeks-z dari latar belakang ...

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

Buka modal dari modal lain (tutup modal pertama)

Ini mirip dengan skenario di atas, tetapi karena kita menutup modal pertama saat modal kedua dibuka, tidak diperlukan perbaikan CSS latar belakang. Fungsi sederhana yang menangani modal ke-2show.bs.modal event menutup modal pertama.

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

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

Buka modal di dalam modal lain

Skenario beberapa modal terakhir adalah membuka modal ke-2 di dalam modal pertama. Dalam hal ini markup untuk yang ke-2 ditempatkan di dalam yang ke-1. Tidak diperlukan CSS atau jQuery tambahan.

<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
sumber
Itu tidak bekerja di Bootstrap 4. Saat Anda menutup modal ke-2, yang pertama tidak lagi bisa menggulir.
Justin
@Justin - Saya tidak melihat skenario khusus yang menunjukkan hal ini, dan karena pengguliran berada di luar cakupan pertanyaan awal. Saya sarankan Anda mencari atau mengajukan pertanyaan lain yang spesifik untuk masalah pengguliran.
Zim
Tipe-n tidak bekerja untuk saya karena tidak melihat kelas. Saya membuatnya berfungsi dengan: .modal-backdrop.show + .modal.show { z-index: 1052 !important; } .modal-backdrop.show + .modal.show + .modal-backdrop.show { z-index: 1051 !important; }
webhead
14

Modal dalam Modal:

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

RedDevil 2015
sumber
gagal untuk saya .. = (modal berfungsi tetapi jika modal pertama panjang, gulungan untuk modal pertama muncul dan ketika Anda membuka modal ke-2 dan menutupnya, gulir modal pertama gagal berfungsi.
Vincent Dapiton
Contoh di atas memunculkan modal sebagai pengganti modal pertama, bukan di atas maupun di dalam (yang pertama tidak lagi terlihat).
JackTheKnife
Efek yang sangat bagus.
Jorge B.
Bagaimana mungkin menggunakan solusi Anda di Semantic UI?
vahidsamimi
9

Bekerja pada proyek yang memiliki banyak modals memanggil modals lain dan beberapa orang HTML yang mungkin tidak tahu untuk memulainya setiap saat untuk setiap tombol. Sampai pada kesimpulan yang mirip dengan @gmaggio, dengan enggan setelah pergi jauh dulu.

EDIT: Sekarang mendukung modals yang dipanggil melalui javascript.

EDIT: Membuka modal gulir dari modal lain sekarang berfungsi.

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

Letakkan saja tombol panggilan modal seperti biasa, dan jika diambil untuk berada di dalam modal, itu akan menutup yang sekarang terlebih dahulu sebelum membuka yang ditentukan dalam data-target. Catatan yang relatedTargetdisediakan oleh Bootstrap.

Saya juga menambahkan yang berikut ini untuk sedikit memperhalus pemudaran: Saya yakin lebih banyak yang bisa dilakukan.

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}
Ren
sumber
Bukan 100% masalah Anda tetapi hook yang ditampilkan. Bs.modal agak berguna. Manajemen kelas body.modal-open tampaknya bermasalah dalam BS v.3.3.5, setelah menutup satu modal dan membuka yang lain tidak ada dan oleh karena itu latar belakangnya bergulir alih-alih modal (kedua). Hook Anda dapat memperbaiki perilaku itu.
Manuel Arwed Schmidt
7

Dokumen Twitter mengatakan kode khusus diperlukan ...

Ini berfungsi tanpa JavaScript tambahan, namun, CSS khusus akan sangat disarankan ...

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

CrandellWS
sumber
1
Berikut contoh lain dengan modal ke-2 yang diformat dengan benar bootply.com/qRsvPSrcO5
Zim
1
@Skelly mengubah indeks-z seperti yang Anda lakukan di css adalah ide yang bagus ...z-index: 1080 !important;
CrandellWS
4
Jika Anda membuka modal ke-2 dan mengeklik di luar, itu akan disadap. (Chrome, terbaru)
Martin Braun
mungkin saya salah tapi saya percaya dokumen mengatakan untuk tidak menempatkan modal dalam modal sehingga agak tidak mengherankan
CrandellWS
7

Untuk bootstrap 4, untuk memperluas jawaban @ helloroy, saya menggunakan yang berikut; -

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

Keuntungan di atas adalah bahwa itu tidak akan berpengaruh ketika hanya ada satu modal, itu hanya berlaku untuk kelipatan. Kedua, mendelegasikan penanganan ke badan untuk memastikan modal masa depan yang tidak dihasilkan saat ini masih dapat dipenuhi.

Memperbarui

Pindah ke solusi gabungan js / css meningkatkan tampilan - animasi pudar terus bekerja di latar belakang; -

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

dikombinasikan dengan css berikut; -

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

Ini akan menangani modal bersarang hingga 4 kedalaman yang lebih dari yang saya butuhkan.

smartbloke
sumber
Itu tidak bekerja di Bootstrap 4. Saat Anda menutup modal ke-2, yang pertama tidak lagi bisa menggulir.
Justin
4

Coba ini:

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

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

Peretasan sederhana ini berhasil untuk saya.

Kristen
sumber
4

Untuk seseorang yang menggunakan 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>
Luaskan cuplikan

halo
sumber
Ini bagus, satu-satunya masalah yang tersisa adalah mencegah kemunculan kembali bilah gulir saat modal paling atas ditutup
HyperActive
2

Saya juga mengalami masalah dengan modals yang dapat digulir, jadi saya melakukan sesuatu seperti ini:

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

Ini akan berfungsi untuk modal apa pun yang ada dalam modal yang muncul. Perhatikan bahwa yang pertama ditutup sehingga yang kedua dapat muncul. Tidak ada perubahan dalam struktur Bootstrap.

teefars
sumber
2

Aku pergi ke rute yang berbeda bersama-sama, aku memutuskan untuk "De-Nest" mereka. Mungkin seseorang akan menganggap ini berguna ...

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
sumber
Terima kasih banyak
2

Kode saya berfungsi dengan baik menggunakan pemecatan data.

<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>
pengguna3675926
sumber
1

Tutup modal Bootstrap pertama dan buka modal baru secara dinamis.

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

Mengapa tidak hanya mengubah konten badan modal?

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

Di modal, cukup letakkan tautan atau tombol

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

Jika Anda hanya ingin beralih di antara 2 modals:

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

Di modal, cukup letakkan tautan atau tombol

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>
Carlo
sumber
Itu lebih seperti jawaban terkait UX, karena saya membutuhkan ini untuk menampilkan pesan kesalahan tentang Modal # 1. Jadi Modal # 2 memiliki pesan kesalahan. Tapi sekarang sudah berabad-abad sejak saya menanyakan pertanyaan ini dan saya melakukan hal-hal semacam ini secara berbeda sekarang.
AlexioVay
0

coba ini:

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

Jawaban yang diberikan oleh H Dog bagus, tetapi pendekatan ini sebenarnya memberi saya beberapa flicker modal di Internet Explorer 11. Bootstrap pertama-tama akan menyembunyikan modal yang menghapus kelas 'modal-open', dan kemudian (menggunakan solusi H Dogs) kami menambahkan kelas 'modal-open' lagi. Saya menduga ini entah bagaimana menyebabkan flicker yang saya lihat, mungkin karena rendering HTML / CSS yang lambat.

Solusi lain adalah mencegah bootstrap dalam menghapus kelas 'modal-open' dari elemen tubuh di tempat pertama. Menggunakan Bootstrap 3.3.7, penggantian fungsi internal hideModal ini bekerja dengan sempurna untuk saya.

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

Dalam penggantian ini, kelas 'modal-open' hanya dihapus jika tidak ada modals yang terlihat di layar. Dan Anda mencegah satu frame menghapus dan menambahkan kelas ke elemen body.

Cukup sertakan override setelah bootstrap dimuat.

Adam
sumber
-4 

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

Alex Sh.
sumber