Modal-backdrop bootstrap Twitter tidak hilang


260

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?


5
Apakah Anda menggunakan $('#myModal').modal('hide')? Bisakah Anda menaruh beberapa kode di sini?
Pigueiras

20
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.
Jordan

@Jordan: Komentar Anda perlu jawaban! Dalam kasus saya, komentar Anda adalah solusi yang tepat!
BlaM


Saya tahu pertanyaannya sudah lama, tetapi hari ini saya memiliki masalah yang sama, dalam situasi saya ada penghapusan kelas "modal-lg" yang ditinggalkan hanya untuk "modal" membuat kekacauan ketika Anda ingin menutup modal tanpa keyboard / klik di suatu tempat di luar.
Matteo

Jawaban:


550

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

16
Akan memberikan jawaban ini +2 jika saya bisa. Baru saja menyelamatkan saya berjam-jam!
Andre Lombaard

9
Menyembunyikan modal sebelum panggilan AJAX adalah solusi yang buruk jika Anda perlu mengevaluasi respons AJAX dan memperbarui modal yang sesuai.
asciimo

19
Saya percaya ini juga dapat disebabkan oleh memanggil modal ('sembunyikan') sebelum animasi fade sepenuhnya selesai. Menghapus kelas fade dari modal dapat membantu.
EvilPuppetMaster

7
$ ('. modal-backdrop'). remove (); mengatasinya untukku, tidak perlu menghapus kelas fade
Omar S.

34
$('.modal-backdrop').remove()nampaknya merusak pembukaan modals masa depan dengan benar.
Krock

65

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.


16
Orang ini mencari uang. Saya menghapus komentar dari modal yang saya dapatkan dengan $ .html () dan sekarang berfungsi. Aneh sekali.
Matrym

2
Ini masalah bagi saya juga.
Bob Black

6
Bootstrap bodoh! Contoh markup mereka sendiri (dengan komentar di awal dan akhir) mematahkan paradigma ini. Hapus komentar dan berfungsi!
goofballLogic

Sama disini. Menghapus komentar memecahkan masalah. Hanya satu pertanyaan. Saya melihat modal bekerja dengan sempurna tanpa menambahkannya ke DOM dengan $ ('body'). Append (myModal). Apakah diperlukan untuk menambah modal ke halaman DOM?
VictorEspina

Saya memiliki tag yang tidak cocok. Hasil yang sama Terima kasih!
jozxyqk

51

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!


15
Saya menghabiskan terlalu lama juga! Jawaban ini memberi saya petunjuk - ada sesuatu yang menghancurkan DOM saya (sudut). Melihat kode bootstrap, Anda bisa langsung memaksa penghapusan latar belakang dengan melakukan menghapus kelas fade terlebih dahulu:$('#myModal').removeClass('fade');$(myModal').modal('hide')'
Ross R

Jawaban yang seharusnya diterima - menggunakan API bootstrap sebagaimana dimaksud dan tidak meretas tubuh dengan .modal-open
Aaron Hudon

Ini adalah jawaban yang paling rajin dan teliti.
JacobIRR

Jawaban bagus, masalah saya juga karena panggilan ajax menggantikan dom - saya kira modal ('sembunyikan') mengembalikan dirinya atau referensi modal sehingga kita dapat melampirkan ke 'hidden.bs.modal'?
Michael Harper

pernyataan bahwa acara penyembunyian modal tidak selesai memberi saya ide tentang cara memulai pekerjaan saya di sekitar
SamuelDev

32

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


2
Ini jawaban yang benar. Dalam keadaan apa pun, cobalah untuk melakukan hal-hal yang seharusnya dilakukan Bootstrap secara manual. Jika itu akan menjadi solusi Anda, Anda salah mengimplementasikannya. Saya pikir HTML boilerplate di situs bootstrap sedikit tidak lengkap dan itulah sebabnya banyak orang mengalami perilaku yang dijelaskan (termasuk saya). Terima kasih! +1
Ben Fransen

3
Bagaimana jika Anda ingin memicu modal bukan dari tombol?
shinzou

7
@ Ben kamu salah. data-backdrop="false"hanyalah sebuah pilihan yang memberitahu bootstrap untuk tidak menggunakan latar belakang sama sekali . Ini tidak ada hubungannya dengan masalah yang sebenarnya, itu hanya menghindarinya. Itu seperti mengatakan "Aku tidak bisa berenang jadi aku berhenti masuk kolam". Itu keren, tapi kamu masih tidak bisa berenang dan jika bosmu melemparmu ke ujung yang dalam, kamu akan tenggelam. Ada banyak kasus di mana intervensi manual diperlukan, seperti ketika Angular menginjak DOM di latar belakang aplikasi Anda.
Wesley Smith

18

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 akan terkutuk ... ini adalah masalah saya. Menghapus komentar dan berhasil. Bagaimana komentar HTML naik Bootstrap !?
Turner Hayes

Saya percaya itu sedang mencari elemen html untuk mendapatkan hitungan. Karena komentar dianggap sebagai elemen, penghitungan ini salah dengan komentar tersebut.
Jordan

terjadi pada saya ketika saya memiliki file ini dalam template Moustache
Pavel 'PK' Kaminsky

Komentar ada di DOM sedemikian rupa sehingga membingungkan setengah javascript dari komponen modal. Saya lupa persis bagaimana. Ini beberapa waktu yang lalu.
Jordan

Holy Moley - itu benar-benar berfungsi! Itu bug yang aneh.
Dror S.

14

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


1
Ini bekerja dengan baik untuk saya. Menggunakan bootstrap 4 di sini.
Eddie Teixeira

1
Ini harus menjadi jawaban default. Terima kasih
Makamu Evans

apa yang myModalseharusnya? Dan mengapa itu menutup dialog? Dialog modal hanya ditutup dengan mengklik tombol tutup atau mengklik di luar dialog. Ini sepertinya tidak menjadi solusi.
MushyPeas

apa seharusnya myModal? -> Ini adalah id dari modal utama. Dan mengapa itu menutup dialog? -> Ini bekerja karena secara default ketika Anda mengklik di luar modal, tindakan menyebar ke induknya, dan ditangani di sana.
Chaitanya Bankanhal

9

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!


Sama di sini, bagaimana jika Anda tidak ingin memicu modal dari tombol?
shinzou

9

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.


8

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


Ini jelas merupakan solusi yang lebih baik. Dengan cara ini Anda tidak perlu dipusingkan dengan kelas modal yang mungkin merupakan cara yang lebih tepat untuk memperbaiki masalah ini.
DeanMWake

6

Kemungkinan kesalahan lain yang dapat menghasilkan masalah ini,

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


5

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


Acara klik yang dipicu secara manual tidak menutup modal di IE9 / IE10 untuk saya. Mencoba mencari solusinya.
Antony Harder

Tidak masalah, masalahnya sedikit berbeda - saya memiliki kondisi data-enabled yang melekat pada tombol itu, dan meskipun IE memang melanjutkan dengan peristiwa onclick, itu tidak mempertimbangkan data-memberhentikan attr.
Antony Harder


3

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.


3

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


2

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.


Ini masalah saya. Saya memiliki AjaxManager yang membuat panel pembaruan di sekitar kontrol pengguna saya yang berisi seluruh modal. Saya hanya meninggalkan tubuh modal di kontrol pengguna dan memindahkan semuanya di halaman utama dan semuanya mulai berfungsi seperti yang diharapkan, jadi jangan mengubah bagian <div id = "# mymodal"> Anda!
AlexanderD

2

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.


2

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.


Bekerja seperti pesona.
Pattu

2

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

1

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.


1

Menggunakan toggle bukannya hide, menyelesaikan masalah saya


1
bagikan jawaban yang mungkin (contoh). Ini akan membantu orang lain untuk mengerti dengan baik
Sachith Muhandiram

1

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.


1

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

1

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

0

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


0

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.


0

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

0
//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/


0

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


});


0

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.


0

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