Modal-backdrop bootstrap Twitter tidak hilang

Saya menggunakan dialog Modal bootstrap Twitter. Ketika saya mengklik tombol kirim dari dialog modal bootstrap, itu mengirimkan permintaan AJAX. Masalah saya adalah bahwa modal-backdrop tidak hilang. Dialog Modal menghilang dengan benar, tetapi "modal-backdrop in" yang membuat opacity pada layar tetap ada

Apa yang dapat saya?

Pastikan Anda tidak mengganti wadah yang berisi jendela modal aktual ketika Anda melakukan permintaan AJAX, karena Bootstrap tidak akan dapat menemukan referensi untuknya ketika Anda mencoba untuk menutupnya. Di penangan lengkap Ajax Anda menghapus modal dan kemudian mengganti data.

Jika itu tidak berhasil, Anda selalu bisa memaksanya pergi dengan melakukan hal berikut:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

Pastikan bahwa panggilan awal Anda ke $.modal() untuk menerapkan perilaku modal tidak melewati lebih banyak elemen daripada yang Anda maksudkan. Jika ini terjadi, pada akhirnya akan membuat contoh modal, lengkap dengan elemen latar belakang, untuk setiap elemen dalam koleksi. Akibatnya, ini mungkin terlihat seperti latar belakang yang tertinggal, ketika sebenarnya Anda sedang melihat salah satu duplikat.

Dalam kasus saya, saya mencoba membuat konten modal sambil jalan dengan beberapa kode seperti ini:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

Di sini, komentar HTML setelah </div>tag penutup berarti bahwa myModal sebenarnya merupakan kumpulan dua elemen jQuery - div, dan komentar. Keduanya patuh berubah menjadi modals, masing-masing dengan elemen latar belakangnya sendiri. Tentu saja, modal yang dibuat dari komentar itu tidak terlihat selain dari latar belakang, jadi ketika saya menutup modal nyata (div) itu tampak seperti latar belakang yang tertinggal.

Saya hanya menghabiskan waktu terlalu lama untuk masalah ini :)

Sementara jawaban lain yang diberikan sangat membantu dan valid, tampaknya agak berantakan bagi saya untuk secara efektif menciptakan kembali fungsi penyembunyian modal dari Bootstrap, jadi saya menemukan solusi yang lebih bersih.

Masalahnya adalah bahwa ada serangkaian peristiwa yang terjadi saat Anda menelepon

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

Saat Anda mengganti sekelompok HTML sebagai hasil dari permintaan AJAX, acara penyembunyian modal tidak selesai. Namun, Bootstrap memicu suatu peristiwa ketika semuanya selesai , dan Anda dapat menghubungkannya seperti itu:

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

Semoga ini bisa membantu!

Masukkan di tombol tindakan Anda ini:

data-backdrop="false"

dan

data-dismiss="modal" 

contoh:

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

jika Anda memasukkan data-attr ini .modal-backdrop tidak akan muncul. dokumentasi tentang hal ini di tautan ini: http://getbootstrap.com/javascript/#modals-usage

Jika Anda menggunakan salin dan tempel dari situs getboostrap itu sendiri ke pemilih html, pastikan Anda menghapus komentar '<! - /.modal ->'. Bootstrap menjadi bingung dan berpikir bahwa komentar tersebut adalah elemen modal kedua. Ini menciptakan drop kembali lain untuk elemen "kedua" ini.

Saya tahu ini posting yang sangat lama tetapi ini mungkin membantu. Ini solusi yang sangat kecil bagi saya

$('#myModal').trigger('click');

Itu saja, ini harus menyelesaikan masalah

Saya mengalami masalah serupa: di jendela modal saya, saya memiliki dua tombol, "Batal" dan "OK". Awalnya, kedua tombol akan menutup jendela modal dengan memohon$('#myModal').modal('hide') (dengan "OK" sebelumnya menjalankan beberapa kode) dan skenario akan menjadi sebagai berikut:

1. Buka jendela modal
2. Lakukan beberapa operasi, lalu klik "OK" lakukan validasi dan tutup modal
3. Buka modal lagi dan abaikan dengan mengklik "Batal"
4. Buka kembali modal, klik lagi pada "Batal" ==> latar belakang tidak lagi dapat diakses!

baiklah, sesama meja depan saya menyelamatkan hari saya: alih-alih memohon $('#myModal').modal('hide'), berikan atribut tombol Anda data-dismiss="modal"dan tambahkan acara "klik" ke tombol "Kirim". Dalam masalah saya, kode HTML (well, TWIG) untuk tombol tersebut adalah:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

dan dalam kode JavaScript saya, saya punya:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

sementara tidak ada acara "klik" yang dikaitkan dengan tombol "Batal". Modal sekarang ditutup dengan benar dan memungkinkan saya bermain lagi dengan halaman "normal". Tampaknya data-dismiss="modal"seharusnya satu-satunya cara untuk menunjukkan bahwa tombol (atau elemen DOM apa pun) harus menutup modal Bootstrap. Itu.modal('hide') Metode tampaknya berperilaku dengan cara tidak cukup terkendali.

Semoga ini membantu!

Masalah ini juga dapat terjadi jika Anda menyembunyikan dan kemudian menampilkan kembali jendela modal terlalu cepat. Ini disebutkan di tempat lain untuk pertanyaan, tetapi saya akan memberikan beberapa detail lebih lanjut di bawah ini.

Masalahnya berkaitan dengan waktu, dan transisi memudar. Jika Anda menunjukkan modal sebelum transisi fade out untuk modal sebelumnya selesai, Anda akan melihat masalah latar belakang yang terus-menerus ini (latar belakang modal akan tetap ada di layar, dengan cara Anda). Bootstrap secara eksplisit tidak mendukung banyak moda simultan, tetapi ini tampaknya menjadi masalah bahkan jika modal yang Anda sembunyikan dan modal yang Anda tampilkan adalah sama.

Jika ini adalah alasan yang tepat untuk masalah Anda, berikut adalah beberapa opsi untuk mengurangi masalah ini. Opsi # 1 adalah tes cepat dan mudah untuk menentukan apakah waktu transisi fade memang penyebab masalah Anda.

1. Nonaktifkan animasi Fade untuk modal (hapus kelas "fade" dari dialog)
2. Perbarui teks modal daripada menyembunyikan dan menampilkannya kembali.
3. Perbaiki waktu sehingga tidak akan menampilkan modal sampai selesai menyembunyikan modal sebelumnya. Gunakan acara modal untuk melakukan ini. http://getbootstrap.com/javascript/#modals-events

Berikut adalah beberapa posting pelacak masalah bootstrap terkait. Ada kemungkinan bahwa ada lebih banyak posting pelacak daripada yang saya sebutkan di bawah ini.

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

.modal ('sembunyikan')

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

Jadi, bukannya

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

melakukan

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

Jadi, Anda pasti menunggu sampai acara "sembunyikan" selesai.

Kemungkinan kesalahan lain yang dapat menghasilkan masalah ini,

Pastikan Anda tidak memasukkan bootstrap.jsskrip lebih dari satu kali di halaman Anda!

Bahkan saya mengalami masalah yang sama, saya memiliki dua tombol berikut

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

Saya ingin melakukan beberapa operasi ajax dan pada keberhasilan operasi ajax itu menutup modal. Jadi inilah yang saya lakukan.

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

Saya memicu acara klik tombol 'Tidak' yang memiliki data-dismiss="modal"properti. Dan ini berhasil :)

menggunakan:

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

Sumber

Solusi ini untuk Ruby on Rails 3.x dan file js.erb yang membangun kembali bagian DOM termasuk modalnya. Ini berfungsi terlepas dari apakah panggilan ajax berasal dari modal atau dari bagian halaman yang berbeda.

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

Terima kasih kepada @BillHuertas untuk titik awalnya.

$ ('# myModal'). trigger ('klik');

Ini berhasil untuk saya. Itu tidak menutup karena ketika Anda membuka popup itu memicu 2 atau 3 modal-latar belakang. Jadi, ketika Anda melakukan $ ('# myModal')). Modal ('hide'); itu hanya mempengaruhi satu modal-latar belakang dan sisa-sisa yang tersisa.

masalah updatepanel.

Masalah saya adalah karena penempatan updatepanel. Saya memiliki seluruh modal dalam updatepanel. Jika Anda mendeklarasikan modal di luar updatepanel dan katakan saja, badan modal, di panel pembaruan, maka $ ('# myModalID'). Modal ('sembunyikan'); bekerja.

Sudut pandang lain untuk pertanyaan ini. (Saya menggunakan bootstrap.js versi 3.3.6)

Saya salah menginisialisasi modal baik secara manual di javascript:

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

dan dengan menggunakan

data-toggle="modal"

pada tombol ini seperti contoh di bawah ini (ditunjukkan dalam dokumen)

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

jadi hasilnya buat dua instance dari

<div class="modal-backdrop fade in"></div>

tambahkan ke tubuh html saya ketika membuka modal. Ini bisa menjadi penyebab ketika menutup modal dengan menggunakan fungsi:

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

hanya menghapus satu contoh latar belakang (seperti yang ditunjukkan di atas) sehingga latar belakang tidak akan hilang. Tapi itu hilang jika Anda menggunakan data-dismiss="modal"add on html seperti yang ditunjukkan di doc bootstrap.

Jadi solusi untuk masalah saya adalah dengan hanya menginisialisasi modal secara manual dalam javascript dan tidak menggunakan atribut data, Dengan cara ini saya dapat menutup modal secara manual dan dengan menggunakan data-dismiss="modal"fitur.

Semoga ini bisa membantu jika Anda menemui masalah yang sama dengan saya.

FYI kalau-kalau ada yang mengalami ini ... Saya telah menghabiskan sekitar 3 jam untuk menemukan bahwa cara terbaik untuk melakukannya adalah sebagai berikut:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

Fungsi untuk menutup modal itu sangat tidak intuitif.

Menambahkan data-dismiss="modal"tombol apa pun di modal saya berhasil untuk saya. Saya ingin tombol saya untuk memanggil fungsi dengan angular untuk menyalakan panggilan ajax DAN menutup modal jadi saya menambahkan .toggle()fungsi dan berfungsi dengan baik. (Dalam kasus saya, saya menggunakan bootstrap modaldan menggunakan beberapa angular, bukan pengontrol modal yang sebenarnya).

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

Saya memiliki masalah yang sama. Saya menemukan itu karena konflik antara Bootstrap dan JQueryUI.

Keduanya menggunakan kelas "tutup". Mengubah kelas di satu atau yang lain memperbaiki ini.

Menggunakan toggle bukannya hide, menyelesaikan masalah saya

Pastikan Anda tidak menggunakan ID / kelas elemen yang sama di tempat lain, untuk elemen yang tidak terkait dengan komponen modal.

Yaitu .. jika Anda mengidentifikasi tombol Anda yang memicu modal popup menggunakan nama kelas 'myModal', pastikan bahwa tidak ada elemen yang tidak terkait yang memiliki nama kelas yang sama.

Setelah menerapkan solusi berperingkat teratas, saya memiliki masalah sehingga tidak dapat membuka modals masa depan dengan benar. Saya telah menemukan solusi saya yang bekerja dengan baik

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

Saya memiliki masalah yang sama ketika mencoba mengirimkan formulir. Solusinya adalah mengubah jenis tombol dari submitmenjadi buttondan kemudian menangani acara klik tombol seperti:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

Dalam proyek .net MVC4 saya memiliki modal pop up (bootstrap 3.0) di dalam Ajax.BeginForm (OnComplete = "addComplete" [kode tambahan dihapus]). Di dalam javascript "addComplete" saya memiliki kode berikut. Ini menyelesaikan masalah saya.

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

$ ("# moreLotDPModal"). data ('bs.modal'). isShown = false;

$ ('body'). removeClass ('modal-open');

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

$ ('# moreLotDPModal'). removeClass ("in");

$ ('# moreLotDPModal'). attr ('aria-hidden', "true");

Saya memiliki masalah yang sama.

Namun saya menggunakan bootbox.js, jadi bisa jadi ada hubungannya dengan itu.

Either way, saya menyadari bahwa masalah ini disebabkan oleh memiliki elemen dengan kelas yang sama dengan orang tuanya. Ketika salah satu elemen ini digunakan untuk mengikat fungsi klik untuk menampilkan modal, maka masalah terjadi.

yaitu inilah yang menyebabkan masalah:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

ubahlah sehingga elemen yang diklik tidak memiliki kelas yang sama dengan orang tuanya, anak-anak itu, atau leluhur lainnya. Mungkin praktik yang baik untuk melakukan ini secara umum saat mengikat fungsi klik.

Saya bekerja dengan Meteor dan saya punya masalah yang sama. Penyebab bug saya adalah ini:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

Seperti yang Anda lihat saya menambahkan modal di yang lain, jadi ketika modal saya memperbarui informasi kontak jika memiliki keadaan lain. Ini menyebabkan templat modal ditinggalkan dari DOM sebelum ditutup.

Solusinya: pindahkan modal keluar dari if-else:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

fiddle -> https://jsfiddle.net/o6th7t1x/4/

nilai awal dari atribut data-backdrop Anda bisa

"statis", "benar", "salah".

statis dan true menambahkan modal shadow, sementara false menonaktifkan shadow, jadi Anda hanya perlu mengubah nilai ini dengan klik pertama menjadi false. seperti ini:

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

Saya memiliki masalah pembekuan layar latar belakang modal tetapi dalam skenario yang sedikit berbeda: Ketika 2 back to back modals sedang ditampilkan. mis. Yang pertama akan meminta konfirmasi untuk melakukan sesuatu dan setelah tombol 'konfirmasi' diklik, tindakan akan menemukan kesalahan dan modal ke-2 akan ditampilkan untuk memunculkan pesan kesalahan. Latar belakang modal kedua akan membekukan layar. Tidak ada bentrokan dalam nama kelas atau id elemen.

Cara masalah itu diperbaiki adalah memberi browser cukup waktu untuk berurusan dengan modal latar belakang. Alih-alih segera mengambil tindakan setelah 'konfirmasi' diklik, berikan browser katakan 500ms untuk menyembunyikan modal pertama dan bersihkan latar belakang dll - kemudian ambil tindakan yang akan berakhir dengan menunjukkan modal kesalahan.

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

Fungsi _dialogConfirmed () memiliki kode berikut:

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

Saya menduga solusi lain bekerja karena mereka membutuhkan waktu ekstra yang cukup memberi browser waktu pembersihan yang diperlukan.

Di ASP.NET, tambahkan pembaruan untuk UpdatePanel pada kode di belakang setelah perintah jquery. Contoh:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();