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?

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

Possível duplicata do Impedir que o Bootstrap Modal desapareça ao clicar fora ou ao pressionar a tecla ESC?

tm

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

@Doguita: Aqui: stackoverflow.com/questions/33000898/…

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

99

Você pode usar um atributo como este: data-backdrop="static"ou com javascript:

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

Consulte esta resposta também: Não permitir que a janela modal de inicialização do twitter seja fechada

Antonis Grigoriadis
fonte

<div id = "modal" class = "modal hide fade in" data-keyboard = "false" data-backdrop = "static"> essa é a melhor resposta.

Kamlesh #

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

usando javascript

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

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

TLDR

backdrop: 'static'

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

especifique staticum pano de fundo que não feche o modal ao clicar.

Geoffrey Hale
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:

"@ ng-bootstrap / ng-bootstrap": "^ 6.1.0",
"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

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

Respostas:

TLDR