Bagaimana cara menyembunyikan modal Bootstrap dengan javascript?


282

Saya sudah membaca posting di sini, situs Bootstrap, dan di-Google-kan dengan gila - tetapi tidak dapat menemukan jawaban yang saya yakin mudah ...

Saya memiliki modal Bootstrap yang saya buka dari pembantu link_to seperti ini:

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

Dalam ContactsController.createtindakan saya , saya memiliki kode yang menciptakan Contactlalu meneruskan ke create.js.erb. Dalam create.js.erb, saya memiliki beberapa kode penanganan kesalahan (campuran ruby ​​dan javascript). Jika semuanya berjalan dengan baik, saya ingin menutup modalnya.

Di sinilah saya mengalami masalah. Sepertinya saya tidak bisa mengabaikan modal ketika semuanya berjalan dengan baik.

Saya sudah mencoba $('#myModal').modal('hide');dan ini tidak berpengaruh. Saya juga sudah mencoba $('#myModal').hide();yang menyebabkan modal untuk mengabaikan tetapi meninggalkan latar belakang.

Adakah panduan tentang cara menutup modal dan / atau mengabaikan latar belakang dari dalam create.js.erb?

Edit

Inilah markup untuk myModal:

<div class="modal hide" id="myModal" >
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Contact</h3>
    <div id="errors_notification">
    </div>
  </div>
  <div class="modal-body">
    <%= form_for :contact, url: contacts_path, remote: true do |f| %>  
      <%= f.text_field :first_name, placeholder: "first name" %>
      <%= f.text_field :last_name, placeholder: "last name" %>
      <br>
      <%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
      <a class="close btn" data-dismiss="modal">Cancel</a>
    <% end %>
  </div>
  <div class="modal-footer">
  </div>
</div>

1
$('#myModal').modal('hide');adalah sintaks yang benar untuk menutup / menyembunyikan modal dengan id myModal(Anda dapat menguji ini pada halaman dokumentasi Bootstrap ). Apakah Anda yakin memiliki elemen dengan id ini di halaman Anda? Juga, apa yang ingin Anda capai dengan panggilan ini? Implementasi Anda saat ini melakukan permintaan Ajax untuk new_contact_pathdan pada saat yang sama membuka modal dengan konten #myModal- apakah ini yang Anda inginkan?
Julian D.

Hai, Julian. Saya memposting markup MyModal di atas dan memang ada div dengan id myModal. Saya mencoba ulang $('myModal').modal('hide')dan masih tidak baik. HM. Dalam hal apa yang saya coba selesaikan, saya pikir mungkin salah menggunakan bantuan link_to. Saya telah mengganti ini dengan: <a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>karena saya tidak benar-benar perlu menelepon new_contact_path. Saya hanya ingin modal terbuka dan kemudian berurusan dengan input pengguna. Terima kasih telah meluangkan waktu untuk merespons. Saya akan melihat apakah saya tidak bisa menyelesaikannya.
jvillian

Saya kira itu hanya salah ketik, tetapi panggilannya harus $('#myModal').modal('hide');(ada yang #hilang dalam komentar Anda).
Julian D.

1
Buruk saya untuk mengetik daripada menyalin dari kode aktual. Kode aktual berbunyi: $('#myModal').modal('hide'). J
jvillian

Anda dapat mencoba menggunakan bootboxjs
md. ariful ahsan

Jawaban:


494

Dengan modal terbuka di jendela browser, gunakan konsol browser untuk mencoba

$('#myModal').modal('hide');

Jika berfungsi (dan modal ditutup) maka Anda tahu bahwa Javascript dekat Anda tidak dikirim dari server ke browser dengan benar.

Jika tidak berhasil maka Anda perlu menyelidiki lebih lanjut pada klien apa yang terjadi. Misalnya, pastikan tidak ada dua elemen dengan id yang sama. Misalnya apakah ini bekerja pertama kali setelah memuat halaman tetapi bukan yang kedua kalinya?

Konsol browser: pembakar untuk firefox, konsol debugging untuk Chrome atau Safari, dll.


Paragraf kedua adalah apa yang saya cari. Duplikat ID membuat modals saya tidak tampil dengan benar untuk kedua kalinya.
Matias

Ini memperbaiki masalah bagi saya. Terima kasih.
Finchy70

77

untuk menutup modal bootstrap Anda dapat meneruskan 'sembunyikan' sebagai opsi ke metode modal sebagai berikut

$('#modal').modal('hide');

Silakan lihat biola yang bekerja di sini

bootstrap juga menyediakan acara yang dapat Anda kaitkan ke fungsionalitas modal , seperti jika Anda ingin memecat suatu peristiwa ketika modal telah selesai disembunyikan dari pengguna, Anda dapat menggunakan hidden.bs.modal event Anda dapat membaca lebih lanjut tentang metode modal dan acara di sini di Dokumentasi

Jika bukan metode di atas yang berfungsi, beri id ke tombol tutup Anda dan memicu klik pada tombol tutup.


1
Ini sangat berguna ketika Anda tahu persis pada titik mana dialog modal seharusnya ditutup. Misalnya di akhir fungsi sukses. Dengan begitu jika ada kesalahan, dialog bisa menampilkannya.
Will

47

Saya menggunakan Bootstrap 3.4 Bagi saya ini tidak berhasil

$('#myModal').modal('hide')

Dalam keputusasaan, saya melakukan ini:

$('#myModal').hide();
$('.modal-backdrop').hide();

Mungkin tidak elegan, tetapi berhasil


2
Akan lebih baik jika Anda menggunakan $ (". Modal-backdrop"). Remove ();
Bloodhound

1
ini akan memperkenalkan bug baru. tolong gunakan metode rekomendasi,
Benjamin Eckstein

jQuery ('. modal-backdrop'). klik ();

kereta kecil tapi pasti berhasil. Solusi Manuel Fernando di bawah ini bekerja dengan sempurna untuk saya.
Munam Yousuf

@Umingo tolong rekomendasikan metode jika yang disebutkan di sini tidak baik dan Anda tahu satu.
rentang

47

Bentuk terbaik untuk menyembunyikan dan menunjukkan modal dengan bootstrap itu

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

Jawaban terbaik sejauh ini. Mensimulasikan perilaku dengan klik, jQuery fadeOut atau css dapat menciptakan ketidaksejajaran dalam jangka panjang.
Giorgio Tempesta

43

Saya mengalami kesalahan yang sama dan baris kode ini sangat membantu saya.

$("[data-dismiss=modal]").trigger({ type: "click" });

1
Saya sudah membaca masalah lain yang menyarankan masalah mungkin memiliki atribut data-dismiss pada elemen, kemudian di atas ini berusaha untuk memicunya dari javascript
Femtosecond

Banyak Banyak Banyak terima kasih Manuel, ini setelah banyak pencarian memecahkan masalah saya, $ ('# MyModelId'). Modal ('sembunyikan'); $ ("[data-dismiss = modal]"). trigger ({type: "click"}); bahwa saya ingin menutup modal pada kesuksesan ajax .... benar-benar banyak terima kasih sayangku
abdelrhman raafat

22
$('#modal').modal('hide'); 
//hide the modal

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class

itu berhasil, tetapi modal mogok jika saya membukanya lagi modal tidak gulir lagi
kosas

21

Saya menemukan solusi yang tepat Anda dapat menggunakan kode ini

$('.close').click(); 

solusi terbaik sejauh ini
kosas

luar biasa sederhananya adalah +1 terbaik
MooMoo

11

Saya bertemu dengan apa yang saya yakini sebagai masalah serupa. The $('#myModal').modal('hide');kemungkinan berjalan melalui fungsi yang dan hits garis

if (!this.isShown || e.isDefaultPrevented()) return

Masalahnya adalah bahwa nilai isShown mungkin tidak terdefinisi bahkan jika modal ditampilkan dan nilainya harus benar. Saya telah memodifikasi sedikit kode bootstrap sebagai berikut

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

Ini tampaknya menyelesaikan masalah sebagian besar. Jika latar belakang masih ada, Anda selalu dapat menambahkan panggilan untuk menghapusnya secara manual setelah panggilan sembunyi $('.modal-backdrop').remove();. Tidak ideal sama sekali tetapi bekerja.


11

(Mengacu Bootstrap 3), Untuk menyembunyikan penggunaan modal: $('#modal').modal('hide'). Tapi alasan latar belakang berkeliaran (bagi saya) adalah karena saya menghancurkan DOM untuk modal sebelum 'sembunyikan' selesai.

Untuk mengatasi ini, saya merantai acara tersembunyi dengan penghapusan DOM. Dalam kasus saya:this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding

1
tapi tolong ceritakan tentang this.render()pertunjukannya undefined is not a functiondi konsol chrome saya.
Anil Kumar Pandey

9

Saya lebih beruntung membuat panggilan setelah panggilan balik "ditampilkan" terjadi:

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

Ini memastikan modal telah selesai dimuat sebelum panggilan hide () dibuat.


8

Apa yang kami temukan adalah bahwa hanya ada sedikit keterlambatan antara panggilan ke kode server kami dan kembali ke panggilan keberhasilan kembali. Jika kita membungkus panggilan ke server di $("#myModal").on('hidden.bs.modal', function (e)handler dan kemudian memanggil $("#myModal").modal("hide");metode, browser akan menyembunyikan modal dan kemudian memanggil kode sisi server.

Sekali lagi, tidak elegan tetapi fungsional.

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

Seperti yang Anda lihat, ketika myFuncdipanggil, ia akan menyembunyikan modal dan kemudian memanggil kode sisi server.


6

Saya mengalami masalah yang sama, dan setelah sedikit percobaan saya menemukan solusi. Di handler klik saya, saya harus menghentikan acara dari menggelegak, seperti:

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

6

Inilah dokumennya: http://getbootstrap.com/javascript/#modals-methods

Inilah metodenya: $ ('# myModal'). Modal ('hide')

Jika Anda perlu membuka beberapa kali modal dengan konten yang berbeda, saya sarankan untuk menambahkan (di js utama Anda):

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

Jadi, Anda akan membersihkan konten untuk pembukaan berikutnya dan menghindari semacam caching


6
$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

5

Bahkan saya memiliki masalah yang sama. ini sangat membantu saya

$("[data-dismiss=modal]").trigger({ type: "click" });


4

$('#modal').modal('hide');dan variannya tidak berfungsi untuk saya kecuali jika saya memiliki data-dismiss="modal"atribut pada tombol Cancel. Seperti Anda, kebutuhan saya adalah untuk menutup / mungkin-tidak menutup berdasarkan pada beberapa logika tambahan sehingga mengklik tautan dengan data-dismiss="modal"outright tidak akan berhasil. Saya akhirnya memiliki tombol tersembunyi dengan data-dismiss="modal"itu saya bisa secara pemrograman memanggil penangan klik dari, jadi

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

dan kemudian di dalam penangan klik untuk membatalkan ketika Anda harus menutup modal yang bisa Anda miliki

$('#hidden-cancel').click();

Dalam kasus saya (halaman jaring asp) saya memilikinya mirip dengan OP: saya punya div agak kosong dengan kelas "modal" dan secara dinamis menambahkan file cshtml ke dalamnya, misalnya badan modal dan menambahkan klik ke tombol ini tubuh segera setelah modal akan ditampilkan. memanggil ".modal ('hide)" saja tidak cukup, seperti yang Anda tunjukkan: "data-dismiss =" modal "" pada tombol pemanggilan adalah kesepakatan !!! ty
Csharpest

3

Kita harus mengurus acara yang menggelegak. Perlu menambahkan satu baris kode

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

3

Saya menyadari ini adalah pertanyaan lama, tetapi saya menemukan bahwa tidak ada satupun yang benar-benar yang saya cari. Tampaknya disebabkan oleh mencoba untuk menutup modal sebelum selesai ditampilkan.

Solusi saya didasarkan pada jawaban @ schoonie23 tetapi saya harus mengubah beberapa hal.

Pertama, saya mendeklarasikan variabel global di bagian atas skrip saya:

<script>
    var closeModal = false;
    ...Other Code...

Kemudian dalam kode modal saya:

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

Maka ini: (Perhatikan nama 'diperlihatkan.bs.modal' yang menunjukkan bahwa modal telah menunjukkan sepenuhnya sebagai kebalikan dari 'pertunjukan' yang memicu ketika acara acara dipanggil. (Saya awalnya mencoba hanya 'ditampilkan' tetapi tidak berhasil. )

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

Semoga ini menyelamatkan seseorang penelitian tambahan suatu hari nanti. Saya menghabiskan sedikit mencari solusi sebelum saya datang dengan ini.


2

Saya menggunakan kode ini -

Sembunyikan modal dengan efek halus menggunakan Fade Out.

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});

1

Jika Anda menggunakan kelas dekat di modals Anda, yang berikut ini akan berfungsi. Tergantung pada kasus penggunaan Anda, saya biasanya merekomendasikan pemfilteran hanya ke modal yang terlihat jika ada lebih dari satu modals dengan kelas dekat.

$('.close:visible').click();

0

document.getElementById ('closeButton'). klik (); // tambahkan atribut data-dismiss = "modal" ke elemen dalam modal dan berikan id ini


-1

Ini adalah praktik buruk tetapi Anda dapat menggunakan teknik ini untuk menutup modal dengan memanggil tombol tutup di javascript. Ini akan menutup modal setelah 3 detik.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<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">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

-2

ini bisa dilakukan hanya dalam HTML:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>

@KevinFrancis Karena pertanyaannya adalah mencari cara terprogram untuk melakukan ini dari controller, bukan bagaimana membuat tombol yang melakukannya.
GreenAsJade
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.