Nie zezwalaj na zamykanie okna modalnego Twitter Bootstrap

Tworzę okno modalne za pomocą Twitter Bootstrap. Domyślne zachowanie jest takie, że jeśli klikniesz poza obszarem modalnym, modal zostanie automatycznie zamknięty. Chciałbym to wyłączyć - tzn. Nie zamykać okna modalnego, gdy klikniesz poza modułem.

Czy ktoś może współdzielić kod jQuery, aby to zrobić?

Myślę, że chcesz ustawić wartość tła na statyczną . Jeśli chcesz uniknąć zamykania okna podczas używania Escklucza, musisz ustawić inną wartość.

Przykład:

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

LUB jeśli używasz JavaScript:

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

Po prostu ustaw backdropwłaściwość na 'static'.

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

Możesz również ustawić keyboardwłaściwość na, falseponieważ zapobiega to zamknięciu modalu przez naciśnięcie Escklawisza na klawiaturze.

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

myModal jest identyfikatorem div, który zawiera twoją zawartość modalną.

Możesz również uwzględnić te atrybuty w samej definicji modalnej:

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

Jeśli już zainicjowałeś okno modalne, możesz zresetować opcje za pomocą, $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})aby upewnić się, że zastosuje nowe opcje.

Zastąp zdarzenie „ukryj” Bootstrap w oknie dialogowym i zatrzymaj jego domyślne zachowanie (aby usunąć okno dialogowe).

Zobacz poniższy fragment kodu:

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

       e.preventDefault();
   });

W naszym przypadku działa dobrze.

Tak, możesz to zrobić w następujący sposób:

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

Niby odpowiedź @ AymKdn, ale pozwoli ci to zmienić opcje bez ponownej inicjalizacji modalu.

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

Lub jeśli potrzebujesz wielu opcji, JavaScript withjest tu przydatny!

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

Jeśli modal jest już otwarty, opcje te zostaną zastosowane dopiero przy następnym otwarciu modalu.

Po prostu dodaj te dwie rzeczy

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

Teraz będzie to wyglądać tak

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

Spowoduje to wyłączenie przycisku Escape, a także kliknięcie w dowolnym miejscu i ukrycie się.

Możesz wyłączyć zachowanie „kliknij, aby zamknąć” w tle i ustawić to jako domyślne dla wszystkich swoich modałów, dodając ten skrypt JavaScript do swojej strony (upewnij się, że jest on wykonywany po załadowaniu jQuery i Bootstrap JS):

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

Jak mówi D3VELOPER, następujący kod rozwiązuje to:

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

Używam zarówno jquery, jak i bootstrap i po prostu removeData('modal')nie działają.

Najlepsze, co znalazłem, to dodanie tego kodu do linku

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

Na wypadek, gdyby ktoś przyszedł tutaj z Google, próbując dowiedzieć się, jak uniemożliwić komuś zamknięcie modalu, nie zapomnij, że w prawym górnym rogu modalu znajduje się również przycisk zamykania, który należy usunąć.

Użyłem CSS, aby go ukryć:

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

Zauważ, że używając „display: none;” zostanie nadpisany podczas tworzenia modalu, więc nie używaj tego.

Jeśli chcesz warunkowo wyłączyć tę backdrop click closingfunkcję. Możesz użyć następującego wiersza, aby ustawić backdropopcję staticpodczas działania.

Bootstrap v3.xx

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

Bootstrap v2.xx

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

Zapobiegnie to zamknięciu już utworzonego modelu z backdropopcją ustawioną na false( zachowanie domyślne ).

Możesz ustawić domyślne zachowanie modalnego wyskakującego okienka, używając poniższego wiersza kodu:

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

Robienie tego jest obecnie bardzo łatwe. Poprostu dodaj:

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

W twoim dzielniku modalnym.

To kolejne rozwiązanie, którego niektórzy z was mogliby szukać (tak jak ja ...)

Mój problem był podobny, okno modalne zamykało się podczas ładowania iframe, który miałem w środku, więc musiałem wyłączyć modalne odrzucanie, dopóki iframe nie zakończy ładowania, a następnie włączyć ponownie.

Przedstawione tutaj rozwiązania nie działały w 100%.

Moje rozwiązanie było następujące:

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

Tymczasowo uniemożliwiam zamknięcie Modalu za pomocą:

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

Ale z var is_loading, który umożliwi zamknięcie po załadowaniu iframe.

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

Aby zaktualizować stan tła w Bootstrap 4.1.3 po wyświetleniu modalu, użyliśmy następującego wiersza z wtyczki Bootstrap-Modal-Wrapper . Odwołanie do kodu repozytorium wtyczek .

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