Twitter bootstrap modal-backdrop kaybolmuyor

Twitter bootstrap Modal iletişim kutusunu kullanıyorum. Bootstrap kalıcı iletişim kutusunun gönder düğmesine tıkladığımda bir AJAX isteği gönderir. Benim sorunum, kalıcı fonun kaybolmaması. Kalıcı iletişim kutusu doğru bir şekilde kaybolmaz, bunun yerine ekranda opaklık oluşturan "kalıcı arka plan"

Ne yapabilirim?

AJAX isteğini yaparken gerçek mod penceresini içeren kapsayıcıyı değiştirmediğinizden emin olun, çünkü Bootstrap kapatmaya çalıştığınızda bu dosyaya bir referans bulamaz. Ajax komple işleyicinizde kipi çıkarın ve ardından verileri değiştirin.

Bu işe yaramazsa, her zaman aşağıdakileri yaparak onu gitmeye zorlayabilirsiniz:

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

$.modal()Kalıcı davranışı uygulamak için ilk çağrınızın istediğinizden daha fazla öğe iletmediğinden emin olun . Bu durumda, koleksiyondaki EACH öğesi için zemin öğesiyle birlikte kalıcı bir örnek oluşturulur. Sonuç olarak, aslında kopyalardan birine baktığınızda, arka plan geride kalmış gibi görünebilir.

Benim durumumda, böyle bir kodla anında modal içerik oluşturmaya çalışıyordum:

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

Burada, kapanış </div>etiketinden sonraki HTML yorumu myModal'ın aslında iki öğeden oluşan bir jQuery koleksiyonu olduğu anlamına geliyordu: div ve yorum. Her ikisi de, her biri kendi zemin unsuruna sahip, modalara dönüştü. Tabii ki, yorumdan yapılan modal zemin dışında görünmezdi, bu yüzden gerçek modal'ı (div) kapattığımda arka plan geride kalmış gibi görünüyordu.

Bu problem üzerinde çok uzun zaman geçirdim :)

Sağlanan diğer cevaplar yararlı ve geçerli olsa da, Bootstrap'tan kalıcı gizleme işlevselliğini etkili bir şekilde yeniden oluşturmak benim için biraz dağınık görünüyordu, bu yüzden daha temiz bir çözüm buldum.

Sorun şu ki, aradığınızda gerçekleşen bir olaylar zinciri var.

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

Daha sonra AJAX isteğinin bir sonucu olarak bir grup HTML'yi değiştirdiğinizde, kalıcı gizleme olayları bitmez. Ancak, Bootstrap her şey bittiğinde bir olayı tetikler ve böyle bir şeye bağlanabilirsiniz:

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

Umarım bu yardımcı olur!

Eylem düğmenize şunu ekleyin:

data-backdrop="false"

ve

data-dismiss="modal" 

misal:

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

Bu data-attr'a girerseniz .modal-backdrop görünmez. bu bağlantıdaki belgeler: http://getbootstrap.com/javascript/#modals-usage

Getboostrap sitesinin kendisinden bir html oluşturulmuş seçiciye kopyalayıp yapıştırın kullanıyorsanız, '<! - /.modal ->' yorumunu kaldırdığınızdan emin olun. Bootstrap karışır ve yorumun ikinci bir kalıcı öğe olduğunu düşünür. Bu "ikinci" öğe için başka bir geri bırakma oluşturur.

Bunun çok eski bir yazı olduğunu biliyorum ama bu yardımcı olabilir. Bu benim için çok küçük bir çözüm

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

İşte bu, sorunu çözmeli

Benzer bir sorun yaşadım: kalıcı penceremde "İptal" ve "Tamam" olmak üzere iki düğme var. Başlangıçta, her iki düğme de $('#myModal').modal('hide')(daha önce bazı kodlar çalıştırılmadan "OK" ile) modsal pencereyi kapatır ve senaryo aşağıdaki gibi olur:

1. Kalıcı pencereyi açın
2. Bazı işlemleri yapın, ardından "Tamam" ı tıklayın ve bunları doğrulayın ve kipi kapatın
3. Kipi tekrar açın ve "İptal" i tıklayarak kapatın
4. Kipi tekrar açın, "İptal" düğmesine tekrar tıklayın ==> zemine artık erişilemiyor!

iyi, bir sonraki masam günümü kurtardı: çağırmak yerine, $('#myModal').modal('hide')düğmelerinize nitelik verin data-dismiss="modal"ve "Gönder" düğmenize bir "tıklama" etkinliği ekleyin. Benim sorunumda, düğmenin HTML (iyi, TWIG) kodu:

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

ve JavaScript kodumda:

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

"İptal" düğmesiyle "tıklama" etkinliği ilişkilendirilmez. Modal şimdi düzgün bir şekilde kapanıyor ve "normal" sayfa ile tekrar oynamama izin veriyor. Aslında data-dismiss="modal", bir düğmenin (veya herhangi bir DOM öğesi) bir Bootstrap modunu kapatması gerektiğini belirtmenin tek yolu olması gerektiği görülmektedir. .modal('hide')Yöntem oldukça kontrollü olmayan bir şekilde davrandığı görülmektedir.

Bu yardımcı olur umarım!

Bu sorun, kalıcı pencereyi çok hızlı bir şekilde gizleyip yeniden gösterirseniz de oluşabilir. Bu soru için başka bir yerde bahsedildi, ancak aşağıda biraz daha ayrıntı vereceğim.

Sorun zamanlama ve solma geçişi ile ilgilidir. Bir önceki mod için yavaşlama geçişi tamamlanmadan bir mod gösterirseniz, bu kalıcı zemin sorununu görürsünüz (mod zemin, ekranda sizin yolunuzda kalacaktır). Bootstrap açıkça birden fazla eşzamanlı kipi desteklemez, ancak gizlediğiniz mod ve gösterdiğiniz mod aynı olsa bile bu bir sorun gibi görünüyor.

Sorununuzun doğru nedeni bu ise, sorunu hafifletmek için bazı seçenekler. Seçenek # 1, solma geçiş zamanlamasının gerçekten probleminizin nedeni olup olmadığını belirlemek için hızlı ve kolay bir testtir.

1. Kalıcı mod için Fade animasyonunu devre dışı bırakın ("fade" sınıfını iletişim kutusundan kaldırın)
2. Kalıcı metni gizlemek ve yeniden göstermek yerine güncelleyin.
3. Zamanlamayı, önceki modun gizlenmesi bitinceye kadar modun gösterilmemesi için sabitleyin. Bunu yapmak için mod olaylarını kullanın. http://getbootstrap.com/javascript/#modals-events

İşte ilgili bazı bootstrap sorunu izleyici gönderileri. Aşağıda listelediğimden daha fazla izleyici yayını olması mümkündür.

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

.modal ( 'gizlemek')

El ile bir modal gizler. Modal gerçekten gizlenmeden önce arayana geri döner (yani hidden.bs.modal olayı gerçekleşmeden önce).

Yani yerine

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

yapmak

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

"Hide" etkinliği bitinceye kadar beklediğinizden emin olabilirsiniz.

Bu sorunu yaratabilecek bir başka olası hata,

bootstrap.jsSayfanıza birden fazla komut dosyası eklemediğinizden emin olun !

Ben de benzer bir sorunla karşılaştım, aşağıdaki iki düğme vardı

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

Bazı ajax operasyonu yapmak istedim ve bu ajax operasyonunun başarısı üzerine modal kapatın. İşte yaptığım şey.

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

Özelliğe sahip olan 'Hayır' düğmesinin tıklama olayını tetikledim data-dismiss="modal". Ve bu işe yaradı :)

kullanın:

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

Kaynak

Bu çözüm, Ruby on Rails 3.x ve kip dahil olmak üzere DOM'un bir bölümünü yeniden oluşturan bir js.erb dosyası içindir. Ajax çağrısının moddan mı yoksa sayfanın farklı bir kısmından mı geldiğine bakılmaksızın çalışır.

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

Başlangıç ​​noktası için @ BillHuertas'a teşekkürler.

. $ ( '# MyModal') tetik ( 'tıklayın');

Bu benim için çalıştı. Açılmıyor çünkü pop-up'ı açtığınızda 2 veya 3 modal fonu tetikliyor. Yani $ ('# myModal')). Modal ('hide') yaptığınızda; sadece bir modal fonu ve dinlenme kalıntılarını etkiler.

güncelleme paneli sorunu.

Benim sorunum güncelleme paneli yerleşimi nedeniyle oldu. Tüm modal güncelleme panelinde vardı. Kipi güncelleştirme panelinin dışında bildirir ve kip gövdesini güncelleme panelinde söylerseniz, $ ('# myModalID'). Modal ('hide'); çalıştı.

Bu soruya başka bir bakış açısı. (Bootstrap.js sürüm 3.3.6 kullanıyorum)

Yanlış modal hem el ile javascript başlatmak:

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

ve kullanarak

data-toggle="modal"

bu düğmede aşağıdaki örnekte olduğu gibi (belgede gösterilmiştir)

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

böylece sonuç iki örneği oluşturur

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

modal açıldığında benim html gövdesine ekleyin. Bu, işlevi kullanarak modun kapatılmasının nedeni olabilir:

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

yalnızca bir arka plan örneğini kaldırır (yukarıda gösterildiği gibi), böylece arka plan kaybolmaz. Ancak data-dismiss="modal", bootstrap doc'de şov olarak html'de add'i kullanırsanız ortadan kalktı .

Bu yüzden benim sorunum çözüm sadece javascript el ile başlatmak ve veri özniteliğini kullanarak değil, bu şekilde hem el ile hem de data-dismiss="modal"özellikleri kullanarak modal kapatabilirsiniz .

Umarım benimle aynı sorunla karşılaşırsanız bu yardımcı olacaktır.

FYI birisinin hala buna girmesi durumunda ... Bunu yapmanın en iyi yolunun aşağıdaki gibi olduğunu keşfetmek için yaklaşık 3 saat geçirdim:

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

Kipi kapatmaya yönelik işlev çok sezgisel değildir.

Modumdaki data-dismiss="modal"herhangi bir düğmeyi eklemek benim için çalıştı. Düğümün bir ajax çağrısını ateşlemek için açısal bir işlevi çağırmasını ve modal'ı kapatmasını istedim, böylece .toggle()işlevin içine bir ekledim ve iyi çalıştı. (Benim durumumda gerçek bir mod denetleyicisi değil, a kullandım bootstrap modalve bazılarını kullandım angular).

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

Ben de aynı problemi yaşadım. Bunun Bootstrap ve JQueryUI arasındaki bir çatışmadan kaynaklandığını keşfettim.

Her ikisi de "close" sınıfını kullanır. Sınıflardan birini veya diğerini değiştirmek bunu düzeltir.

Hide yerine toggle kullanmak problemimi çözdü

Kalıcı bileşenle ilgisi olmayan bir öğe için aynı öğeyi başka bir yerde Id / sınıfı kullanmadığınızdan emin olun.

Yani, 'myModal' sınıf adını kullanarak kalıcı açılır pencereleri tetikleyen düğmelerinizi tanımlıyorsanız, aynı sınıf adına sahip ilgisiz öğelerin olmadığından emin olun.

En yüksek puan alan çözümü uyguladıktan sonra, gelecekteki modals düzgün açılmasını kırar bir sorun yaşadım. İyi çalışan çözümümü buldum

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

Formu göndermeye çalışırken aynı sorunu yaşadım. Çözüm, düğme türünü olarak submitdeğiştirmek buttonve ardından düğme tıklama olayını şu şekilde işlemekti:

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

Net MVC4 projesinde ben bir Ajax.BeginForm (OnComplete = "addComplete" [ekstra kod silindi]) içinde kalıcı pop (bootstrap 3.0) vardı. "AddComplete" javascript içinde aşağıdaki kodu vardı. Bu benim sorunumu çözdü.

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

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

$ ( 'Body') removeClass ( 'modal açık.');

. $ ( 'Modal-arka')) (kaldırma;

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

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

Ben de aynı sorunu yaşadım.

Ancak bootbox.js kullanıyordum, bu yüzden bununla ilgili bir şey olabilirdi.

Her iki durumda da, sorunun üst sınıfla aynı sınıfa sahip bir öğeye sahip olmasından kaynaklandığını fark ettim. Bu öğelerden biri, modu görüntülemek için bir tıklama işlevini bağlamak için kullanıldığında, sorun oluşur.

yani soruna neden olan şey budur:

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

tıklatılan öğenin üst öğesi, alt öğeleri veya diğer ataları ile aynı sınıfa sahip olmayacağı şekilde değiştirin. Tıklama işlevlerini bağlarken genel olarak bunu yapmak iyi bir uygulamadır.

Meteor ile çalışıyorum ve aynı problemi aldım. Böceğimin nedeni şuydu:

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

Gördüğünüz gibi, başka bir modda modal ekledim, bu yüzden modum iletişim bilgilerini güncellediğinde, eğer başka bir durumu vardı. Bu, kalıcı şablonun kapanmadan hemen önce DOM dışında kalmasına neden oldu.

Çözüm: modal'ı if-else'den çıkarın:

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

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

veri arka planı özelliğinizin başlangıç ​​değeri

"statik", "doğru", "yanlış".

statik ve doğru mod gölgesini eklerken yanlış gölgeyi devre dışı bırakır, bu nedenle bu değeri ilk tıklama ile false olarak değiştirmeniz yeterlidir. bunun gibi:

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


});

Kalıcı arka plan dondurma sorunu vardı ama biraz farklı bir senaryoda: 2 arka arkaya modals görüntülenirken. Örneğin, ilki bir şey yapmak için onay ister ve 'onayla' düğmesine tıklandıktan sonra, eylem bir hatayla karşılaşır ve 2. modal hata mesajını açmak için görüntülenecekti. İkinci mod arka plan ekranı dondurur. Sınıf isimlerinde veya öğelerin kimliklerinde çatışma olmadı.

Sorunun çözülme şekli, tarayıcıya modal zeminle başa çıkmak için yeterli zaman vermekti. 'Onayla' tıklandıktan hemen sonra harekete geçmek yerine, tarayıcıya 1. modal'ı gizlemek ve fonu temizlemek vb. İçin 500ms deyin - sonra hata kipini gösterecek eylemi gerçekleştirin.

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

_DialogConfirmed () işlevi şu koda sahiptir:

    var that = this;

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

Diğer çözümlerin işe yaradığını tahmin ediyorum çünkü tarayıcıya gerekli temizleme zamanını vermek için fazladan zaman harcadılar.

ASP.NET'te, jquery komutunun arkasındaki koda UpdatePanel için bir güncelleştirme ekleyin. Misal:

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