Bootstrap Modunu Kapat

Başlangıçta göstermek istediğim bir bootstrap kalıcı iletişim kutusu var, daha sonra kullanıcı sayfayı tıkladığında kayboluyor. Şunlara sahibim:

$(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 başlangıçta görüntülenir, ancak modalın dışına tıklandığında kapanmaz. Ayrıca, içerik alanı gri görünmüyor .. Modalın başlangıçta görüntülenmesini, ardından kullanıcı alanın dışını tıklattıktan sonra kapanmasını nasıl sağlayabilirim? Ve demodaki gibi arka planın gri olmasını nasıl sağlayabilirim?

Put modal('toggle')yerinemodal(toggle)

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

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 isterseniz, hidden.bs.modal olayını kullanarak burada modal yöntemler ve olaylar hakkında daha fazla bilgi edinebilirsiniz. belgeleme

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

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

veya

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

çalışmalı.

Ancak başka hiçbir şey işe yaramazsa, doğrudan mod kapatma düğmesini çağırabilirsiniz:

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

bu benim için çalıştı:

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

bu bağlantıyı kullan modal close

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

Bu çağrıyı sınıf ($(".my-modal"))üzerinden yapmak işe yaramaz.

Bunu dene

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

Bu oldukça iyi ve aynı zamanda açısal 2 çalışır

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

Bu konuda beş sentim, bootstrap modalını bir kimliğe hedeflemek istemiyorum ve geçişin tehlikeli olabileceğinden, aşağıdaki anda sadece bir modal olması gerektiği için aşağıdaki modalın çıkarılması için yeterli olmalıdır. :

$('.modal').removeClass('show');

Bazı durumlarda yazım hatası suçlu olabilir. Örneğin, şunlara sahip olduğunuzdan emin olun:

data-dismiss="modal"

ve yok

data-dissmiss="modal"

İkinci örnekte Kapat düğmesinin başarısız olmasına neden olacak çift "ss" dikkat edin.

Kalıcı açılır pencereyi aşağıdaki şekillerde kapatabiliriz:

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

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

bir sayfada birden çok kalıcı pop kullanıyorsanız, modal fonunu gizlemek için yukarıdaki kodu kullanın.

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

kullanabilirsiniz;

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

Modal.hide kullanıldığında yalnızca modal gizlenir. Kipin altında bindirme kullanıyorsanız, hala orada olurdu. modal'ı gerçekten kapatmak ve kaplamayı kaldırmak için tıklama çağrısını kullanın.

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

Bunu yapmanın bir başka yolu, önce modal kapanan modal-open sınıfını kaldırmanızdır. Ardından, modalın grimsi kapağını kaldıran sınıf modal fonunu kaldırırsınız.

Aşağıdaki kod kullanılabilir:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  

Bu hile ile programsal olarak modal kapadım

İle mod içine bir düğme ekleyin ve ile düğmeyi data-dismiss="modal"gizleyin display: none. İşte böyle görünecek

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

Modal'ı Programlı olarak kapatmak istediğinizde , o düğme üzerinde kullanıcı tarafından görülmeyen bir tıklama olayını tetiklemeniz yeterlidir

Javascript'te bu düğmeyi şu şekilde tıklatabilirsiniz:

document.getElementById('close-modal').click();

Bu kod benim bir modal kapatmak için mükemmel çalıştı (bootstrap 3.3 kullanıyorum)

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

Benim durumumda, bootstrap modalının tetiklendiği ana sayfa, $("#modal").modal('toggle');yolu kullandıktan sonra yanıt vermemeye başladı, ancak aşağıdaki şekilde yanıt vermeye başladı:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

Bu iyi çalışıyor

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

Bununla birlikte, üst üste istiflenen birden fazla modaya sahip olduğunuzda etkili değildir, bunun yerine bu işe yarar

data-dismiss="modal"

Bazı testinden sonra ben önyükleme kalıcı ihtiyaç çalıştırmadan önce bir süre beklemek için tespit $(.modal).modal('hide')yürüttükten sonra $(.modal).modal('show'). Ve benim durumumda ikisi arasında en az 500 milisaniye aralığa ihtiyacım olduğunu buldum.
Bu benim test durumum ve çözümüm:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

Bu referansı görebilirsiniz, ancak bu bağlantı kaldırıldıysa şu açıklamayı okuyun:

Tek satır JavaScript ile myModal kimliğine sahip bir yöntem çağırın:

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

Seçenekler

Seçenekler veri özellikleri veya JavaScript aracılığıyla geçirilebilir. Veri öznitelikleri için, data-backdrop = "" gibi , seçenek adına veri adını ekleyin .

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

Yöntemler

Asenkron yöntemler ve geçişler

Tüm API yöntemleri eşzamansızdır ve bir geçiş başlatır. Geçiş başlar başlamaz ama bitmeden arayana geri dönerler. Ayrıca, bir geçiş bileşenine yönelik bir yöntem çağrısı yok sayılır.

Daha fazla bilgi için JavaScript belgelerimize bakın.

.modal (seçenekler)

İçeriğinizi kalıcı olarak etkinleştirir. İsteğe bağlı bir seçenekler nesnesini kabul eder.

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

.modal ( 'geçiş')

El ile bir modal değiştirir. Modal gerçekten gösterilmeden veya gizlenmeden önce arayana geri döner (yani shown.bs.modal veya hidden.bs.modal olayı gerçekleşmeden önce).

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

.modal ( 'göster')

Manuel olarak bir yöntem açar. Modal gerçekten gösterilmeden önce arayana geri döner (yani shown.bs.modal olayı gerçekleşmeden önce).

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

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

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

.modal ( 'handleUpdate')

Bir modun açıkken yüksekliği değişiyorsa (yani bir kaydırma çubuğunun görünmesi durumunda) modun konumunu manuel olarak yeniden ayarlayın.

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

.modal ( 'imha')

Bir elemanın modelini yok eder.

Etkinlikler

Bootstrap'ın modal sınıfı, modal işlevselliğe bağlanmak için birkaç olay ortaya koyar. Tüm modal olaylar modalın kendisinde (yani **) ateşlenir. Tip Açıklama

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

Ayrıca, iletişim kutusunu kapatan bir 'x' işaretini tıklayabilirsiniz. Örneğin:

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

Benim durumumda, modu göstermek için bir düğme kullandım

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

Yani benim kod, modal kapatmak için (ki id = 'my-modal-to-show') Ben bu işlevi çağırır (Açısal patlama):

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

$ (ModalId) .modal ('hide') çağırırsam işe yaramaz ve neden bilmiyorum

PS .: modalımda bu düğme öğesini .close sınıfıyla da kodladım

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

Bazı durumlarda çözüm çalışmaz, böylece sınıfta düzgün bir şekilde kaldırmak ve css ekranını eklemek zorundasınız: yok elle.

$("#modal").removeClass("in");
$("#modal").css("display","none");