Desativar clique fora da área modal de inicialização para fechar o modal

440

Estou criando um site de bootstrap, com alguns 'Modais' de bootstrap. Estou tentando personalizar alguns dos recursos padrão.

O problema é esse; Você pode fechar o modal clicando no fundo. Existe alguma maneira de desativar esse recurso? Apenas em modais específicos?

Página modal de inicialização

javascript  css  twitter-bootstrap  modal-dialog 
— Egghead
fonte
você pode me dizer qual evento é chamado nessa situação. $ scope.ok, $ scope. $ demitir Eu tenho implementado para enviar e abortar, mas não sei o evento disparado nessa situação.
— LoveToCode 31/03
4
— tm

Respostas:

911

No capítulo Opções, na página que você vinculou, você pode ver a backdropopção. Passar essa opção com valor 'static'impedirá o fechamento do modal.
Como o @PedroVagner apontou nos comentários, você também pode passar {keyboard: false}para impedir o fechamento do modal pressionando Esc.

Se você abrir o modal por js, use: 

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

Se você estiver usando atributos de dados, use: 

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
— Doguita
fonte
existe uma maneira de manter o plano de fundo capaz de registrar os cliques para outros controles, mas simplesmente não fechar os modais?
— precisa saber é o seguinte
2
@mystikacid Você deve fazer uma nova pergunta para isso. Será melhor ajudá-lo com o seu problema e com outros usuários que buscam uma solução semelhante.
— Doguita 7/10/2015
— vivekanon
3
Teve um problema simples, mas irritante, certifique-se de colocar a linha de jquery antes de $('#modal').modal('show');Espero que isso ajude!
— Cwiggo 14/10/2015
3
cwiggo você não usa modal $ ('# modal'). modal ('show'); - você acabou de usar .modal ({backdrop: 'static', teclado: false}) - sem nenhum comando show ou toggle
— TV-C-15
135

Este é o mais fácil

Você pode definir seu comportamento modal, definindo teclado de dados e cenário de dados.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
— Sushan
fonte
2
Esta é a única coisa que funcionou para mim. Passar as opções diretamente no JS simplesmente não funcionou para mim por algum motivo (versão 3.3.7). Se mais alguém corroborar, posso abrir um problema com a equipe do Bootstrap.
— dchacke
No início, o uso da versão js também não funcionava para mim, porque eu estava definindo tudo depois que abri o modal. Você deve fazer isso "$ ('# modalForm'). Modal ({backdrop: 'static', teclado: false});" antes deste "$ ('# modalForm'). modal ('show');". Mas para mim, a melhor resposta é de @ ಅನಿಲ್
— Lucas
Isso funcionou para mim. Colocar a data-backdrop="static"opção na definição modal, não no botão de acionamento que abre o modal conforme especificado em outras respostas, funcionou para mim.
— TS19
34

No meu aplicativo, estou usando o código abaixo para mostrar o modal Bootstrap via jQuery.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });
— ಅನಿಲ್
fonte
Essa é uma boa resposta, pois esse código funcionará apenas quando o modal estiver aberto.
— Deepak Dholiyan 18/04/19
32

Você pode usar

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

para alterar o comportamento padrão.

— David Navarro Astudillo
fonte
Ótima resposta, pois lida com a situação para todos os modais.
— Haris ur Rehman
1
No bootstrap v4, a sintaxe é: $ .fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
— Garry English
11

Há duas maneiras de desativar o clique fora da área do modelo de auto-inicialização para fechar o

  1. usando javascript

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

  2. usando atributo de dados na tag HTML

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

Veja isso ::

$(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>
Expandir snippet

— Sachin Sanchaniya
fonte
6

Outra opção se você não sabe se o modal já foi aberto ou ainda não e precisa configurar as opções modais:

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

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

Altere as opções para _config

— cava
fonte
para Bootstrap 4 +, deveria ser em _setEscapeEvent()vez de .escape()?
— Ivan Bacher
@IvanBacher Funciona para mim usando .escape ()
— Cava
5

A solução que funciona para mim é a seguinte: 

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

pano de fundo: desativado o evento clique fora

keyboard: desativou o evento de palavra-chave scape

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

tente isso, durante o desenvolvimento do aplicativo ... Também encontrei o problema de que os valores padrão para um atributo de modelo => data-keyboard="true", =>data-backdrop="non static"

Espero que isso ajude você!

— Deepalakshmi
fonte
3

Tente o seguinte:

<div
  class="modal fade"
  id="customer_bill_gen"
  data-keyboard="false"
  data-backdrop="static"
>
— Vijay Chauhan
fonte
Isso funcionou para mim, graças .....
— Ajay Kumar
1

nenhuma dessas soluções funcionou para mim.

Eu tenho um modal de termos e condições que eu queria forçar as pessoas a revisar antes de continuar ... os padrões "estático" e "teclado", conforme as opções, tornaram impossível rolar a página, pois os termos e condições são algumas páginas log, estática não foi a resposta para mim.

Então, em vez disso, desativei o método click no modal, com o seguinte consegui o efeito desejado.

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

— RGB
fonte
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
fonte
0

Se você estiver usando o @ ng-bootstrap, use o seguinte:

Componente

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

Modelo

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

Este código foi testado no angular 9 usando:

  1. "@ ng-bootstrap / ng-bootstrap": "^ 6.1.0",

  2. "bootstrap": "^ 4.4.1",

— Hamfri
fonte
0

Use isso se desejar desativar o clique externo para todos os modais usando o jQuery. Adicione este script ao seu Javascript após o jQuery.

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

Você também pode fazer isso sem usar o JQuery, assim:

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
— Sirar Salih
fonte
-2

Adicione o css abaixo conforme sua largura de tela.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
— Atul
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.