440

Tworzę stronę startową z kilkoma „Modalami” Bootstrap. Próbuję dostosować niektóre domyślne funkcje.

Problem jest taki; Możesz zamknąć modal klikając na tło. Czy istnieje możliwość wyłączenia tej funkcji? Tylko w przypadku określonych modeli?

javascript css twitter-bootstrap modal-dialog jajogłowy
źródło

czy możesz mi powiedzieć, które wydarzenie jest wywoływane w tej sytuacji. $ scope.ok, $ scope. $ lekceważę Mam implementację do przesyłania i przerywania, ale nie wiem, czy zdarzenie zostało uruchomione w tej sytuacji.

LoveToCode,

4

Możliwy duplikat Zapobiegania zniknięciu modalu rozruchowego po kliknięciu na zewnątrz lub naciśnięciu klawisza Escape?

tm

912

W rozdziale Opcje na połączonej stronie można zobaczyć tę backdropopcję. Przekazanie tej opcji wartości 'static'spowoduje, że moduł nie zostanie zamknięty.
Jak zauważył @PedroVagner w komentarzach, możesz również przejść, {keyboard: false}aby zapobiec zamknięciu modalu, naciskając Esc.

Jeśli otwierasz modal przez js użyj:

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

Jeśli używasz atrybutów danych, użyj:

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`

Doguita
źródło

czy istnieje sposób, aby tło mogło rejestrować kliknięcia dla innych kontrolek, ale po prostu nie zamykać modalności?

vivekanon

2

@mystikacid Powinieneś w tym celu zadać nowe pytanie. Lepiej będzie pomóc ci z problemem i innymi użytkownikami szukającymi podobnego rozwiązania.

Doguita,

@Doguita: Tutaj: stackoverflow.com/questions/33000898/...

vivekanon

3

Miałem prosty, ale irytujący problem, upewnij się, że umieściłeś linię jquery przed $('#modal').modal('show');Nadzieją, że to pomaga!

cwiggo

3

cwiggo nie używasz modalu $ ('# modal'). modal ('show'); - po prostu używasz .modal ({tło: „statyczny”, klawiatura: fałsz}) - bez żadnych poleceń pokazywania lub przełączania

TV-C-15,

135

To jest najłatwiejsze

Możesz zdefiniować swoje zachowanie modalne, definiując klawiaturę danych i tło danych.

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

Sushan
źródło

2

To jedyna rzecz, która działała dla mnie. Przekazywanie opcji bezpośrednio w JS po prostu nie działało dla mnie z jakiegoś powodu (wersja 3.3.7). Jeśli ktokolwiek to potwierdzi, mogę otworzyć problem z zespołem Bootstrap.

dchacke

Początkowo używanie wersji js też nie działało, ponieważ wszystko ustawiałem po otwarciu modalu. Powinieneś zrobić to „$ ('# modalForm'). Modal ({backdrop: 'static', keyboard: false});” przed tym „$ ('# modalForm'). modal ('show');”. Ale dla mnie najlepsza odpowiedź pochodzi z @ ಅನಿಲ್

Lucas

To zadziałało dla mnie. data-backdrop="static"Dla mnie zadziałało umieszczenie opcji w definicji modalnej, a nie przycisku wyzwalającego otwierającego modal, jak podano w innych odpowiedziach.

TSmith

99

Możesz użyć takiego atrybutu: data-backdrop="static"lub z javascript:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})

Zobacz także tę odpowiedź: Nie zezwalaj na zamykanie okna modalnego programu ładującego Twitter

Antonis Grigoriadis
źródło

<div id = "modal" class = "modal hide fade in" data-keyboard = "false" data-backdrop = "static"> to najlepsza odpowiedź.

Kamlesh

34

W mojej aplikacji używam poniższego fragmentu kodu, aby pokazać modalność Bootstrap za pośrednictwem jQuery.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });

ಅನಿಲ್
źródło

To dobra odpowiedź, ponieważ ten kod będzie działał tylko wtedy, gdy modal jest otwarty.

Deepak Dholiyan

32

Możesz użyć

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

zmienić domyślne zachowanie.

David Navarro Astudillo
źródło

Świetna odpowiedź, ponieważ radzi sobie z sytuacją we wszystkich modułach.

Haris ur Rehman

1

W bootstrap v4 składnia jest następująca: $ .fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';

Garry English

11

Istnieją dwa sposoby wyłączenia kliknięcia poza obszarem modelu bootstrap, aby zamknąć modal-

za pomocą javascript

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

za pomocą atrybutu danych w znaczniku HTML

data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.

Gaurav Tripathi
źródło

9

Sprawdź to ::

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    
    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
        </head>
    <body>
        <div class="modal" id="popup" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Standard Selectpickers</h3>
            </div>
            <div class="modal-body">
                
                <select class="selectpicker" data-container="body">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <a id="click-me" class="btn btn-primary">Click Me</a> 
    </body>
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>

Rozwiń fragment kodu

Sachin Sanchaniya
źródło

6

Inna opcja, jeśli nie wiesz, czy modal został już otwarty, czy jeszcze nie i musisz skonfigurować opcje modalne:

Bootstrap 3.4

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal').options.keyboard = keyboard;
    $modal.data('bs.modal').options.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

Bootstrap 4.3+

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal')._config.keyboard = keyboard;
    $modal.data('bs.modal')._config.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

Zmień opcje na _config

wino
źródło

dla Bootstrap 4 + powinno być _setEscapeEvent()zamiast .escape()?

Ivan Bacher

@IvanBacher działa dla mnie przy użyciu .escape ()

Cava

5

Rozwiązanie, które działa dla mnie, jest następujące:

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

tło: wyłączono zdarzenie „kliknij poza”

klawiatura: wyłączono zdarzenie słowa kluczowego scape

Jorge Santos Neill
źródło

4

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

spróbuj tego, Podczas tworzenia aplikacji ... Spotkałem się również z problemem, że domyślne wartości atrybutu modelu => data-keyboard="true" , =>data-backdrop="non static"

Mam nadzieję, że to ci pomoże!

Deepalakshmi
źródło

3

Spróbuj tego:

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

Vijay Chauhan
źródło

To zadziałało dla mnie dzięki .....

Ajay Kumar

1

żadne z tych rozwiązań nie działało dla mnie.

Mam modalny regulamin, który chciałem zmusić ludzi do sprawdzenia przed kontynuowaniem ... domyślne ustawienia „statyczne” i „klawiatura” zgodnie z opcjami uniemożliwiły przewijanie strony, ponieważ warunki to kilka stron log, statyczny nie był dla mnie odpowiedzią.

Zamiast tego poszedłem rozpiąć metodę click na module, dzięki czemu udało mi się uzyskać pożądany efekt.

$('.modal').off('click');

RGB
źródło

0

TLDR

backdrop: 'static'

https://getbootstrap.com/docs/3.3/javascript/#modals-options

określ statictło, które nie zamyka modalu po kliknięciu.

Geoffrey Hale
źródło

0

You can Disallow closing of #signUp (This should be the id of the modal) modal when clicking outside of modal.
As well as on ESC button.
jQuery('#signUp').on('shown.bs.modal', function() {
    jQuery(this).data('bs.modal').options.backdrop = 'static';// For outside click of modal.
    jQuery(this).data('bs.modal').options.keyboard = false;// For ESC button.
})

sonu pokade
źródło

0

Jeśli używasz @ ng-bootstrap, użyj następujących poleceń :

Składnik

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
})
export class ExampleComponent implements OnInit {

  constructor(
    private ngbModal: NgbModal
  ) {}

  ngOnInit(): void {
  }

  openModal(exampleModal: any, $event: any) {
    this.ngbModal.open(exampleModal, {
      size: 'lg', // set modal size
      backdrop: 'static', // disable modal from closing on click outside
      keyboard: false, // disable modal closing by keyboard esc
    });
  }
}

Szablon

<div (click)="openModal(exampleModal, $event)"> </div>
    <ng-template #exampleModal let-modal>
        <div class="modal-header">
            <h5 class="modal-title">Test modal</h5>
        </div>
        <div class="modal-body p-3">
            <form action="">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="">Test field 1</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="">Test field 2</label>
                        <input type="text" class="form-control">
                    </div>

                    <div class="text-right pt-4">
                        <button type="button" class="btn btn-light" (click)="modal.dismiss('Close')">Close</button>
                        <button class="btn btn-primary ml-1">Save</button>
                    </div>
            </form>
        </div>
    </ng-template>

Ten kod został przetestowany na kancie 9 przy użyciu:

„@ ng-bootstrap / ng-bootstrap”: „^ 6.1.0”,
„bootstrap”: „^ 4.4.1”,

Hamfri
źródło

0

Użyj tego, jeśli chcesz wyłączyć kliknięcie zewnętrzne dla wszystkich modów korzystających z jQuery. Dodaj ten skrypt do JavaScript po jQuery.

jQuery(document).ready(function () {
    jQuery('[data-toggle="modal"]').each(function () {
       jQuery(this).attr('data-backdrop','static');
       jQuery(this).attr('data-keyboard','false');
    });
});

Sahan
źródło

-1

Możesz to również zrobić bez użycia JQuery, na przykład:

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;

Sirar Salih
źródło

-2

Dodaj poniższy css, jak chcesz szerokość ekranu.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}

Atul
źródło

Wyłącz kliknięcie poza obszarem modalnym bootstrap, aby zamknąć modal

Odpowiedzi:

TLDR