Nie zezwalaj na zamykanie okna modalnego Twitter Bootstrap

549

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

użytkownik1296175
źródło
1
Możesz mieć całkowicie uzasadniony powód, aby to zrobić (i prawdopodobnie jest wiele innych). Warto jednak zauważyć, że generalnie rozważania dotyczące UX odradzają to - większość użytkowników spodziewa się, że kliknięcie modalu spowoduje przeniesienie treści „poniżej” na „front”.
Trevor
32
@ Trevor To jest przeciwieństwo modalu .
Rawling,
11
co jeśli, jeśli w tle znajduje się strona, którą można aktywować tylko wtedy, gdy użytkownik zaloguje się najpierw. Po kliknięciu modalnego przycisku OK użytkownik zostanie przekierowany na stronę logowania. Jeśli użytkownik może po prostu kliknąć, oznacza to, że użytkownik pomija stronę logowania i po prostu uzyskuje dostęp do strony bez logowania. All Hell Break Loose
skoczek rbk
5
@ Trevor Nie widzę żadnych dowodów na poparcie twojego roszczenia.
1252748,
Funkcja jest sensowna w scenariuszu, w którym użytkownik musi wypełnić wiele pól formularza w module. Jeśli użytkownik przypadkowo kliknie poza modułem, wszystkie wprowadzone dane zostaną utracone; wtedy będą musieli ponownie aktywować modal i uzupełnić pola. Ta funkcja pozwoliłaby uniknąć takiego podrażnienia.
mickmackusa,

Odpowiedzi:

692

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
});
Nobita
źródło
7
@ user1296175 Jaki był twój końcowy kod, aby to osiągnąć? Chcę zrobić to samo.
AlphaMale,
4
Dziękuję @nobita, dodaj dane-tło = "statyczny" załatwi sprawę! Dokument bootstrap na Twitterze jest słaby :(
Blue Smith,
2
Sprawdź odpowiedź na @@ Varun Chatterji i dołącz ją do swojej definicji modalnej
Leandro
1
wyłącz kliknięcie zewnętrzne dla wszystkich modów z pojedynczą linią js: $ .fn.modal.Constructor.DEFAULTS.backdrop = 'static';
Lukas Liesis
1
Dla użytkowników Angular: var modalInstance = $ modal.open ({templateUrl: 'modalTemplate.html', kontroler: 'modalController', tło: 'static',});
Alexandr
310

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

Nirmal
źródło
6
Tak, to najczystsza i najprostsza odpowiedź (ponieważ pozwala uniknąć dodawania atrybutów danych). W celach informacyjnych backdropi keyboardsą wymienione tutaj w dokumentacji w sekcji Opcje .
Jesse Dupuy,
Czy atrybutów danych należy unikać? Prosimy o przypomnienie tego.
@GopalAggarwal: Zależy od konfiguracji modalu. Jeśli skojarzysz modal z wieloma tagami zakotwiczenia, użycie atrybutów danych może mieć sens. Ale kiedy jest tylko jeden modal na tag, wybrałbym parametry skryptu, w których każde zachowanie jest widoczne w jednym miejscu.
Nirmal
7
Również, aby uniknąć wyświetlania modalnego natychmiast przekazać w show: false
ClearCloud8
214

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

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">
Varun Chatterji
źródło
4
Tak, to najczystsza i najprostsza odpowiedź (ponieważ działa poprzez dodanie atrybutów danych). Dla odniesienia, tło i klawiatura są wymienione tutaj w ich dokumentacji w sekcji Opcje.
floww
Jeśli uruchomisz modal przy ładowaniu strony, jest to najlepszy sposób na usunięcie innych opcji zamykania.
Święty Mikołaj
46

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.

AymKdn
źródło
1
To mi pomogło. Po ustawieniu „tła:„ statycznego ”” użytkownik nadal może zamknąć mod za pomocą jednego kliknięcia; wydawało się, że to błąd, ale to załatwiło sprawę!
Omar,
7
Na razie: $ ('# modal'). RemoveData ('bs.modal'). Modal ({backdrop: 'static', keyboard: false});
D3VELOPER
34

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.

Sam Jha
źródło
2
jak to cofnąć?
sertaconay,
3
Po prostu elegancki. dzięki :) I @sertaconay po prostu utwórz zmienną boolowską (na przykład), która zostanie sprawdzona, aby zdecydować, czy chcesz zapobiec domyślnej
Nimrod Yonatan Ben-Nes
1
jedyna opcja, która działała po tym, jak modal był opend
zapytała_io
2
Jest to idealne rozwiązanie, jeśli chcesz mieć lepszą kontrolę nad tym, kiedy modale są zamykalne, a kiedy nie.
Curos
33

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">
Satish Singh
źródło
Jest to idealne rozwiązanie w przypadku, gdy modal jest zadeklarowany w html i otwierany tylko przez javascript - tzn. Nie ma do niego linku. Dzięki!
hgolov
22

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.

CBarr
źródło
stackoverflow.com/questions/16030448/… Ale nie podoba mi się to rozwiązanie
Victor
14

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

Vivek
źródło
Ta rada została udzielona wiele lat wcześniej.
mickmackusa,
11

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';
});
Eric B.
źródło
6

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

Morgan RotaStabelli
źródło
4

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>
użytkownik3634719
źródło
2

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.

Rysował
źródło
Czy nie możesz również po prostu usunąć przycisku z nagłówka modalnego?
foop
Czasami korzystniej jest używać CSS zamiast zmieniać HTML.
Drew
2

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

Mohd Abdul Mujib
źródło
2

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';
haresh hanat
źródło
jak +1 tej metody, nie chcę tej opcji dla wszystkich modałów.
tsohr
2

Robienie tego jest obecnie bardzo łatwe. Poprostu dodaj:

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

W twoim dzielniku modalnym.

jfindley
źródło
Ta rada została udzielona wiele lat wcześniej na tej samej stronie.
mickmackusa,
1

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.

miguelmpn
źródło
1
<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>
shiva krishna
źródło