Javascript ile Bootstrap modal nasıl gizlenir?

Buradaki mesajları okudum, Bootstrap sitesi ve deli gibi Googled - ama emin olduğum şeyi bulamıyorum kolay bir cevap ...

Ben böyle bir link_to yardımcı açmak bir Bootstrap modal var:

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

Benim ContactsController.createeylem, ben oluşturur Contactsonra geçer geçer kod var create.js.erb. İçinde create.js.erb, bazı hata işleme kodu (ruby ve javascript karışımı) var. Eğer her şey yolunda giderse, kipi kapatmak istiyorum.

Burada sorun yaşıyorum. Her şey yolunda gittiğinde kipi atmış gibi görünmüyorum.

Denedim $('#myModal').modal('hide');ve bunun bir etkisi yok. Ayrıca $('#myModal').hide();modalın işten çıkarılmasına neden olan ama arka plandan çıkan denedim .

Modalın nasıl kapatılacağı ve / veya arka planın içeriden nasıl çıkarılacağı konusunda herhangi bir rehberlik var create.js.erbmı?

Düzenle

İşte myModal için işaretleme:

<div class="modal hide" id="myModal" >
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Contact</h3>
    <div id="errors_notification">
    </div>
  </div>
  <div class="modal-body">
    <%= form_for :contact, url: contacts_path, remote: true do |f| %>  
      <%= f.text_field :first_name, placeholder: "first name" %>
      <%= f.text_field :last_name, placeholder: "last name" %>
      <br>
      <%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
      <a class="close btn" data-dismiss="modal">Cancel</a>
    <% end %>
  </div>
  <div class="modal-footer">
  </div>
</div>

Mod tarayıcı penceresinde açıkken, denemek için tarayıcı konsolunu kullanın

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

Çalışır (ve modal kapatır) o zaman yakın JavaScript biliyorsanız değil doğru tarayıcıya sunucudan gönderilen.

Eğer işe yaramazsa, müşteri üzerinde neler olduğunu daha fazla araştırmanız gerekir. Örneğin, aynı kimliğe sahip iki öğe olmadığından emin olun. Örneğin, sayfa yüklendikten sonra ilk kez çalışıyor, ancak ikinci kez çalışmıyor mu?

Tarayıcı konsolu: firefox için firebug, Chrome veya Safari için hata ayıklama konsolu vb.

Bootstrap modunu kapatmak için aşağıdaki gibi mod yöntemine 'hide' seçeneğini iletebilirsiniz

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

Lütfen buradaki keman çalışmalarına bir göz atın

bootstrap ayrıca modsal işleve bağlayabileceğiniz olaylar sağlar, örneğin modun kullanıcıdan gizlenmesi bittiğinde bir olayı tetiklemek istiyorsanız, buradaki mod yöntemleri ve olaylar hakkında daha fazla bilgi edinebilirsiniz. belgeleme

Yukarıdaki yöntemlerden biri işe yaramazsa, kapatma düğmenize bir kimlik verin ve kapatma düğmesine tıklayın.

Bootstrap 3.4 kullanıyorum Benim için çalışmıyor

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

Çaresizlik içinde şunu yaptım:

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

Belki zarif değil, ama işe yarıyor

Bootstrap ile bir modal gizlemek ve göstermek için en iyi form

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

Aynı hatayla karşılaşıyordum ve bu kod satırı gerçekten bana yardımcı oluyor.

$("[data-dismiss=modal]").trigger({ type: "click" });

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

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class

Bu kodu kullanabileceğiniz doğru çözümü buldum

$('.close').click(); 

Benzer bir konu olduğuna inandığım şeyle karşılaştım. Büyük $('#myModal').modal('hide');olasılıkla bu işlev üzerinden geçiyor ve satıra çarpıyor

if (!this.isShown || e.isDefaultPrevented()) return

Sorun, mod gösterilse ve değer doğru olsa bile isShown değerinin tanımsız olabilmesidir. Bootstrap kodunu biraz aşağıdaki gibi değiştirdim

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

Bu çoğunlukla sorunu çözmüş gibiydi. Zemin hala devam ediyorsa, gizleme çağrısından sonra manuel olarak kaldırmak için her zaman bir çağrı ekleyebilirsiniz $('.modal-backdrop').remove();. Hiç ideal değil ama işe yarıyor.

(Bootstrap 3'e atıfla), Modsal kullanımı gizlemek için: $('#modal').modal('hide') . Ancak arka planın (benim için) asılı olmasının nedeni, 'saklanmadan' önce mod için DOM'u yok etmemdi.

Bu sorunu çözmek için gizli olayı DOM kaldırma ile zincirledim. Benim durumumda:this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding

"Gösterilen" geri arama gerçekleştikten sonra arama yapmak daha iyi şanslar vardı:

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

Bu, modun hide () çağrısı yapılmadan önce yüklenmesini sağlamıştır.

Bulduğumuz şey, sunucu kodumuza çağrı ile başarıya geri dönüşün geri dönüşü arasında sadece hafif bir gecikme olmasıydı. Çağrıyı sunucuya $("#myModal").on('hidden.bs.modal', function (e)işledikten sonra $("#myModal").modal("hide");yöntemi çağırırsak , tarayıcı modal'ı gizler ve ardından sunucu tarafı kodunu çağırır.

Yine, zarif değil ama işlevsel.

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

Gördüğünüz gibi, ne zaman myFuncçağrılırsa, kipi gizler ve ardından sunucu tarafı kodunu çağırır.

Aynı sorunu yaşıyordum ve biraz deney yaptıktan sonra bir çözüm buldum. Tıklama işleyicimde, olayın köpürmesini durdurmak gerekiyordu, şöyle:

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

Doküman: http://getbootstrap.com/javascript/#modals-methods

İşte yöntem: $ ('# myModal'). Modal ('hide')

Farklı içerikli modalın birkaç kez açılması gerekiyorsa, eklemenizi öneririm (size ana js'de):

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

Böylece bir sonraki açılış için içeriği temizleyecek ve bir tür önbelleklemeden kaçınacaksınız

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

Bende de aynı tür sorunlar var. bu bana çok yardımcı oldu

$("[data-dismiss=modal]").trigger({ type: "click" });

Bu basit kodu kullandım:

$("#MyModal .close").click();

$('#modal').modal('hide');ve data-dismiss="modal"İptal düğmesinde bir özellik olarak bulunmadıkça değişkenleri benim için çalışmadı . Sizin gibi benim ihtiyaçlarım bazı ek mantığa dayanarak muhtemelen kapatmak / muhtemelen kapatmak değil, bu yüzden data-dismiss="modal"açıkça bir bağlantıyı tıklamak olmazdı. data-dismiss="modal"Programlı olarak tıklama işleyicisini çağırabileceğim gizli bir düğmeye sahip oldum, bu yüzden

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

ve ardından modal'ı kapatmanız gerektiğinde iptal etmek için tıklama işleyicilerinin içinde

$('#hidden-cancel').click();

Olay köpürmesine dikkat etmeliyiz. Bir satır kod eklemeniz gerekiyor

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

Bunun eski bir soru olduğunun farkındayım, ama bunların hiçbirinin tam olarak aradığım şey olmadığını anladım. Görünüşe göre modal kapanmaya çalışılıyor gibi görünüyor.

Benim çözümüm @ schoonie23'ün cevabına dayanıyordu ama birkaç şeyi değiştirmek zorunda kaldım.

İlk olarak, senaryomun üst kısmında global bir değişken beyan ettim:

<script>
    var closeModal = false;
    ...Other Code...

Sonra kalıcı kodumda:

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

Sonra bu: (Mod olayı çağrıldığında tetikleyicinin 'göster' yerine tamamen gösterildiğini gösteren 'shown.bs.modal' adını not edin. (Başlangıçta 'gösterildi' denedim ama işe yaramadı. )

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

Umarım bu birisi bir gün fazladan araştırma tasarrufu sağlar. Ben bunu bulmadan önce biraz çözüm aramak için harcadım.

Bu kodu kullandım -

Soldur'u kullanarak yumuşak efektli modal gizleyin.

$('#myModal').fadeOut();

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

$('.modal-open').css({'overflow': 'visible'});

Modals'da yakın sınıfı kullanıyorsanız, aşağıdakiler işe yarayacaktır. Kullanım durumunuza bağlı olarak, genellikle yakın sınıfa sahip birden fazla moda varsa sadece görünür modda filtrelemenizi öneririm.

$('.close:visible').click();

document.getElementById ( 'CloseButton') () tıklayın.; // moddaki bir öğeye data-dismiss = "modal" özniteliği ekleyin ve bu kimliği verin

Bu kötü bir uygulamadır, ancak javascript'teki kapat düğmesine basarak modal'ı kapatmak için bu tekniği kullanabilirsiniz. Bu modal 3 saniye sonra kapanacaktır.

<!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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</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" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

bu sadece HTML'de yapılabilir:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>