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


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

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

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


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

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

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.


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

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>


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


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


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


3

Tente o seguinte:

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

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



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

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


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

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

-2

Adicione o css abaixo conforme sua largura de tela.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
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.