Twitter Bootstrap kalıcı penceresinin kapanmasına izin verme

Twitter Bootstrap kullanarak kalıcı bir pencere oluşturuyorum. Varsayılan davranış, kalıcı alanın dışını tıklatırsanız kalıcı otomatik olarak kapanır. Bunu devre dışı bırakmak istiyorum - yani modun dışına tıklarken mod penceresini kapatmayın.

Birisi bunu yapmak için jQuery kodunu paylaşabilir mi?

Ben ayarlamak istediğiniz inanıyoruz fon değeri için statik . EscAnahtarı kullanırken pencerenin kapanmasını önlemek istiyorsanız, başka bir değer ayarlamanız gerekir.

Misal:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

VEYA JavaScript kullanıyorsanız:

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});

Sadece backdropözelliği olarak ayarlayın 'static'.

$('#myModal').modal({
  backdrop: 'static',
  keyboard: true
})

keyboardÖzelliği , klavyedeki tuşa falsebasarak modun kapatılmasını önlediğinden de ayarlamak isteyebilirsiniz Esc.

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

myModal kalıcı içeriğinizi içeren div'ın kimliğidir.

Bu öznitelikleri kalıcı tanımın kendisine de ekleyebilirsiniz:

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">

Kalıcı pencereyi zaten başlattıysanız $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false}), yeni seçenekleri uygulayacağından emin olmak için seçenekleri ile sıfırlamak isteyebilirsiniz .

İletişim kutusunun Bootstrap 'hide' olayını geçersiz kılın ve varsayılan davranışını durdurun (iletişim kutusunu atmak için).

Lütfen aşağıdaki kod snippet'ine bakın:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

Bizim durumumuzda iyi çalışıyor.

Evet, bunu şu şekilde yapabilirsiniz:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

@ AymKdn'ın cevabı gibi, ancak bu, modalı yeniden başlatmadan seçenekleri değiştirmenize izin verecektir.

$('#myModal').data('modal').options.keyboard = false;

Veya birden fazla seçenek yapmanız gerekiyorsa, withburada JavaScript'ler kullanışlı olur!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

Mod zaten açıksa, bu seçenekler yalnızca modun bir sonraki açılışında geçerli olur.

Sadece bu iki şeyi ekleyin

data-backdrop="static" 
data-keyboard="false"

Şimdi böyle görünecek

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

Kaçış düğmesini ve ayrıca herhangi bir yeri tıklayıp gizleyecektir.

Bu JavaScript'i sayfanıza ekleyerek arka planın tıkla ve kapat davranışını devre dışı bırakabilir ve bunu tüm modals'larınız için varsayılan yapabilirsiniz (jQuery ve Bootstrap JS yüklendikten sonra yürütüldüğünden emin olun):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

D3VELOPER'ın dediği gibi, aşağıdaki kod sorunu çözer:

$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});

Hem jquery hem de bootstrap kullanıyorum ve sadece removeData('modal')çalışmıyor.

Bulduğum en iyi bağlantıya bu kodu eklemek

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

Birinin Google'dan birisinin bir modalı kapatmasını nasıl önleyeceğini anlamaya çalışması durumunda, modalın sağ üst tarafında çıkarılması gereken bir kapatma düğmesi olduğunu unutmayın.

Gizlemek için bazı CSS kullandım:

#Modal .modal-header button.close {
    visibility: hidden;
}

"Display: none;" mod oluşturulduğunda üzerine yazılır, bu yüzden bunu kullanmayın.

backdrop click closingÖzelliği koşullu olarak devre dışı bırakmak istiyorsanız . Çalışma zamanı sırasında backdropseçeneği ayarlamak için aşağıdaki satırı kullanabilirsiniz static.

Bootstrap v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

Bootstrap v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

Bu backdropseçenek false( varsayılan davranış ) olarak ayarlanmış halihazırda başlatılmış bir modelin kapanmasını önleyecektir .

Aşağıdaki kod satırını kullanarak kalıcı açılır pencerenin varsayılan davranışını ayarlayabilirsiniz:

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

Bunu yapmak günümüzde çok kolay. Sadece ekle:

data-backdrop="static" data-keyboard="false" 

Kalıcı bölücünüzde.

Bu, bazılarınızın aradığı başka bir çözüm (benim gibi)

Benim sorunum benzerdi, içerideki iframe yüklenirken mod kutusu kapanıyordu, bu yüzden Iframe yüklemeyi bitirene kadar mod kapatma işlevini devre dışı bırakmak zorunda kaldım, sonra yeniden etkinleştirin.

Burada sunulan çözümler% 100 çalışmıyor.

Benim çözümüm şuydu:

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

Bu yüzden kalıcı olarak Modal ile kapanmasını önlemek:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

Ancak iframe yüklendikten sonra kapatmayı yeniden etkinleştirecek var is_loading ile.

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>

Modsal görüntülendikten sonra Bootstrap 4.1.3'teki arka plan durumunu güncellemek için, Bootstrap-Modal-Wrapper eklentisinden aşağıdaki satırı kullandık . Eklenti Havuz kodu referansı .

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");