Tutup Modal Bootstrap


432

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?


Apakah Anda menginisialisasi modal Anda dengan $("#yourModal").modal()atau $('.modal').modal()?
merv

Menambahkan lebih banyak konteks di atas. Terima kasih atas gagasan @merv!
Nick B

ya ... itu menunjukkan masalahnya. @ Tamil memiliki solusi Anda.
merv

Jawaban:


706

Taruh modal('toggle')bukannyamodal(toggle)

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

5
Termasuk 'toggle' sama sekali superflous. Pastikan saja tidak memiliki kelas 'sembunyikan' di modal mod. Tapi ya, kesalahan ketiklah yang menyebabkan masalah. jadi +1
merv

22
tidak itu tidak berfungsi sebagaimana dimaksud, ia menyembunyikan elemen modal tetapi elemen lapisan latar belakang masih ada, Anda harus menggunakan solusi @Subodth.
Parik Tiwari

1
@Pierre - pertimbangkan untuk menghapus komentar Anda, .modal (). Hide () tidak sama dengan .modal ('hide'), Anda akan membingungkan orang.
Michael Peterson

2
Seperti kata Parik, jawaban yang benar adalah menggunakan modal ('sembunyikan')
MidouCloud

Ini BUKAN jawaban yang benar, periksa jawaban di bawah ini!
user1467439

412

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.


4
$ ('# modal'). modal ('toggle'); lebih baik untuk menyembunyikan modal shadow
hamzeh.hanandeh

5
@ hamzeh.hanandeh, togglesimpan overlay dan bukan solusi. Anda harus selalu menggunakan showatau hide.
ryanpcmcquen

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

10
yang dengan hide () menutup modal tetapi membiarkan latar belakangnya kabur. $ ("# modal .close"). klik () melakukannya dengan sempurna. Terima kasih!
Shilpa

4
Ini sudah jelas didokumentasikan, di sini tidak perlu memalsukan klik, yang tampaknya cukup janky. Jawaban yang benar adalah: $ ('# modal'). Modal ('hide');
Michael Peterson

this -> $ ('# modal'). modal (). hide ();
TARA

Saya memiliki model yang tidak dekat dengan $('#modal').modal('hide')namun saya bisa menutupnya menggunakan $('#modal').modal('toggle')tetapi menampilkan bilah gulir vertikal setelah ditutup. Jadi bagi saya $('#modal').hide()bekerja dengan sempurna tetapi saya ingin tahu apakah itu akan membuat masalah? Dan saya coding di dalam $('#modal .close').click()jadi saya tidak berpikir saya bisa menggunakannya untuk menutup modal.
Ahtisham

34

ini bekerja untuk saya:

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

gunakan modal tautan ini tutup


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

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


18

Coba ini

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

3
Saya pikir ini memberikan jawaban untuk pertanyaan itu.
jkdev

1
Saya setuju. Jawaban ini lebih akurat untuk pertanyaan itu.
mikeyq6

1
Ini adalah jawaban yang lebih baik daripada yang paling banyak dipilih.
Marcelo Agimóvel

@ MarceloAgimóvel :-)
Love Kumar

10

ini cukup bagus dan juga berfungsi dalam sudut 2

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

Berfungsi untuk saya dan bukannya $('#modal').modal('toggle');tidak berpengaruh.
Todor Todorov

8

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

2
Niatnya baik, tetapi pendekatan ini tidak akan selalu berhasil. Elemen halaman lainnya, termasuk <body>, memiliki kelas yang ditambahkan padanya yang harus dikembalikan juga. Jawaban terbaik adalah menggunakan 'hide'metode ini.
JustinStolle

7

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.


6

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.

6

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

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


Atau hanya $('.modal').modal('hide');akan dilakukan.
Matt Roy

6

<!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/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</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">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>


Kesalahan: "message": "Uncaught TypeError: $ (...).
Modal

Iya. Saya memiliki kesalahan jika "Menjalankan cuplikan kode" di Chrome (Linux Mint). Tapi itu berfungsi di Firefox.
Ivan Burlutskiy

1
@Ivan Burlutskiy, Terima kasih telah memberitahu saya, Ini adalah masalah dengan jquery, jadi saya memperbaikinya. sekarang berfungsi dengan baik di semua browser.
Ganesh Putta

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

Hai - terima kasih atas jawaban Anda. Saya telah memformat ini sebagai kode (yang cukup sederhana - indentasi baris pertama sedikit lebih banyak). Namun saya kira hanya yang $('#DeleteModal').modal('hide');relevan di sini?
Rup

4

kamu bisa menggunakan;

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

3

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

3

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

Cobalah menghindari hanya membuang kode sebagai jawaban dan coba jelaskan apa fungsinya dan mengapa. Kode Anda mungkin tidak jelas bagi orang yang tidak memiliki pengalaman pengkodean yang relevan. Harap edit jawaban Anda untuk memasukkan klarifikasi, konteks, dan coba sebutkan batasan, asumsi, atau penyederhanaan dalam jawaban Anda.
Frits

OK, jadi pada dasarnya apa yang dilakukan adalah menghapus kelas modal-terbuka, yang menutup modal. kemudian menghapus latar belakang modal kelas yang menghilangkan penutup modal keabu-abuan dari modal
Orozcorp

3

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

2

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

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

2

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

2

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"

2

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

ini memecahkan masalah yang saya miliki dengan modal tidak menutup saat saya membuka yang lain, terima kasih
hal9000

2

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

0

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

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


0

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>

0

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");
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.