Bagaimana cara menyembunyikan modal Bootstrap dengan javascript?

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>

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.

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.

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

Bentuk terbaik untuk menyembunyikan dan menunjukkan modal dengan bootstrap itu

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

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

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

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

Saya menemukan solusi yang tepat Anda dapat menggunakan kode ini

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

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.

(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

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.

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.

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

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

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

Bahkan saya memiliki masalah yang sama. ini sangat membantu saya

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

Saya menggunakan kode sederhana ini:

$("#MyModal .close").click();

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

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

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.

Saya menggunakan kode ini -

Sembunyikan modal dengan efek halus menggunakan Fade Out.

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

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

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

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

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

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>

ini bisa dilakukan hanya dalam HTML:

data-dismiss="modal"

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