Tutup Modal Bootstrap

Saya memiliki kotak dialog modal bootstrap yang ingin saya tunjukkan pada awalnya, kemudian ketika pengguna mengklik pada halaman, itu menghilang. Saya memiliki yang berikut ini:

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

Modal ditampilkan pada awalnya, tetapi tidak ditutup ketika diklik di luar modal. Selain itu, area konten tidak berwarna abu-abu .. Bagaimana saya bisa mendapatkan modal untuk ditampilkan pada awalnya, lalu tutup setelah pengguna mengklik di luar area? Dan bagaimana saya bisa mendapatkan latar belakang menjadi abu-abu seperti di demo?

Taruh modal('toggle')bukannyamodal(toggle)

$(function () {
   $('#modal').modal('toggle');
});

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 tidak ada metode di atas yang berfungsi, beri id ke tombol tutup Anda dan memicu klik pada tombol tutup.

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

atau

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

harus bekerja.

Tetapi jika tidak ada yang berhasil, Anda dapat memanggil tombol tutup modal secara langsung:

$("#modal .close").click()

ini bekerja untuk saya:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

gunakan modal tautan ini tutup

$("#your-modal-id").modal('hide');

Menjalankan panggilan ini melalui kelas ($(".my-modal"))tidak akan berfungsi.

Coba ini

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

ini cukup bagus dan juga berfungsi dalam sudut 2

$("#modal .close").click()

Lima sen saya untuk yang satu ini adalah bahwa saya tidak ingin harus menargetkan modal bootstrap dengan id dan melihat karena seharusnya hanya ada satu modal pada saat berikut ini harus cukup memadai untuk menghapus modal karena beralih bisa berbahaya :

$('.modal').removeClass('show');

Dalam beberapa keadaan kesalahan pengetikan bisa menjadi penyebabnya. Misalnya, pastikan Anda memiliki:

data-dismiss="modal"

dan tidak

data-dissmiss="modal"

Perhatikan double "ss" pada contoh kedua yang akan menyebabkan tombol Close gagal.

Kami dapat menutup pop-up modal dengan cara berikut:

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.

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

gunakan kode di atas untuk menyembunyikan latar belakang modal jika Anda menggunakan beberapa modal pop dalam satu halaman.

   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };

kamu bisa menggunakan;

$('#' + $('.modal.show').attr('id')).modal('hide');

Menggunakan modal.hide hanya akan menyembunyikan modal. Jika Anda menggunakan overlay di bawah modal, itu masih ada di sana. gunakan panggilan klik untuk benar-benar menutup modal dan menghapus hamparan.

$("#modalID .close").click()

Cara lain untuk melakukan ini adalah pertama-tama Anda menghapus kelas modal-terbuka, yang menutup modal. Kemudian Anda menghapus latar belakang modal kelas yang menghilangkan penutup modal keabu-abuan.

Kode berikut dapat digunakan:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  

Saya menutup modal Secara terprogram dengan trik ini

Tambahkan tombol dengan modal data-dismiss="modal"dan sembunyikan tombol dengan display: none. Ini akan terlihat seperti apa

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

Sekarang ketika Anda ingin menutup modal Secara terprogram hanya memicu acara klik pada tombol itu, yang tidak terlihat oleh pengguna

Di Javascript Anda dapat memicu klik pada tombol itu seperti ini:

document.getElementById('close-modal').click();

Kode ini berfungsi dengan baik bagi saya untuk menutup modal (saya menggunakan bootstrap 3.3)

$('#myModal').removeClass('in')

Dalam kasus saya, halaman utama dari mana bootstrap modal dipicu mulai tidak merespons setelah menggunakan $("#modal").modal('toggle');cara, tetapi mulai merespons dengan cara berikut:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

Ini bekerja dengan baik

$(function () {
   $('#modal').modal('toggle');
});

Namun, ketika Anda memiliki banyak modals yang saling menumpuk satu sama lain, itu tidak efektif, jadi, ini berfungsi

data-dismiss="modal"

Setelah beberapa tes, saya menemukan bahwa untuk modal bootstrap perlu menunggu beberapa saat sebelum mengeksekusi $(.modal).modal('hide')setelah mengeksekusi $(.modal).modal('show'). Dan saya menemukan dalam kasus saya, saya memerlukan setidaknya 500 milidetik interval antara keduanya.
Jadi ini adalah ujian dan solusi saya:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

Anda dapat melihat referensi ini tetapi jika tautan ini telah dihapus, baca deskripsi ini:

Panggil modal dengan id myModal dengan satu baris JavaScript:

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

Pilihan

Opsi dapat dilewatkan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data- , seperti pada data-backdrop = "" .

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

Metode

Metode dan transisi yang tidak sinkron

Semua metode API tidak sinkron dan memulai transisi. Mereka kembali ke penelepon segera setelah transisi dimulai tetapi sebelum berakhir. Selain itu, pemanggilan metode pada komponen transisi akan diabaikan.

Lihat dokumentasi JavaScript kami untuk informasi lebih lanjut.

.modal (opsi)

Mengaktifkan konten Anda sebagai modal. Menerima objek opsi opsional.

$('#myModal').modal({
   keyboard: false
})

.modal ('beralih')

Beralih modal secara manual. Kembali ke pemanggil sebelum modal benar-benar telah ditampilkan atau disembunyikan (yaitu sebelum acara yang ditampilkan.bs.modal atau hidden.bs.modal).

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

.modal ('show')

Membuka modal secara manual. Kembali ke penelepon sebelum modal benar-benar ditampilkan (yaitu sebelum peristiwa yang ditampilkan.bs.modal terjadi).

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

.modal ('sembunyikan')

Menyembunyikan modal secara manual. Kembali ke pemanggil sebelum modal benar-benar disembunyikan (yaitu sebelum peristiwa hidden.bs.modal terjadi).

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

.modal ('handleUpdate')

Atur kembali posisi modal secara manual jika ketinggian modal berubah saat terbuka (yaitu jika bilah gulir muncul).

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

.modal ('buang')

Hancurkan modal elemen.

Acara

Kelas modal Bootstrap memaparkan beberapa peristiwa untuk terhubung ke fungsionalitas modal. Semua peristiwa modal dipecat di modal itu sendiri (yaitu di **). Ketikkan Deskripsi

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Selain itu, Anda dapat "mengklik" pada 'x', yang menutup dialog. Misalnya:

$(".ui-dialog-titlebar-close").click();

Dalam kasus saya, saya menggunakan tombol untuk menunjukkan modal

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

Jadi dalam kode saya, untuk menutup modal (yang memiliki id = 'my-modal-to-show') Saya memanggil fungsi itu (dalam skrip Angular):

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

Jika saya memanggil $ (modalId) .modal ('hide') itu tidak berfungsi dan saya tidak tahu mengapa

PS: dalam modal saya, saya mengkodekan elemen tombol dengan kelas .close juga

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

beberapa kali solusi tidak berfungsi sehingga Anda harus menghapus dengan benar di kelas dan menambahkan tampilan css: tidak ada secara manual.

$("#modal").removeClass("in");
$("#modal").css("display","none");