Proibir o fechamento da janela modal do Twitter Bootstrap


549

Estou criando uma janela modal usando o Twitter Bootstrap. O comportamento padrão é que, se você clicar fora da área modal, o modal será fechado automaticamente. Gostaria de desativar isso - ou seja, não fechar a janela modal ao clicar fora do modal.

Alguém pode compartilhar o código jQuery para fazer isso?


1
Você pode ter um motivo perfeitamente válido para fazer isso (e provavelmente há muitos outros). No entanto, vale a pena notar que, em geral, as considerações de UX não recomendariam isso - a maioria dos usuários espera que clicar em um modal traga o conteúdo "abaixo" para a "frente".
Trevor

32
@ Trevor Isso é como o oposto do modal .
Rawling

11
what if, se houver uma página em segundo plano que só poderá ser ativada se o usuário fizer login primeiro. Ao clicar no botão modal Ok, o usuário será redirecionado para a página de login. Se o usuário puder apenas clicar, significa que o usuário pula a página de login e apenas acessa a página sem login. Todos os Hell Break Loose
jumper rbk,

5
@ Trevev Não vejo nenhuma evidência para apoiar sua reivindicação.
1252748 7/11

O recurso é sensível em um cenário em que o usuário precisa preencher muitos campos de formulário no modal. Se o usuário clicar acidentalmente fora do modal, todos os detalhes inseridos serão perdidos; então eles teriam que reativar o modal e reabastecer os campos. Esse recurso evitaria essa irritação.
mickmackusa

Respostas:


692

Acredito que você deseja definir o valor do pano de fundo como estático . Se você quiser evitar que a janela se feche ao usar a Escchave, é necessário definir outro valor.

Exemplo:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

OU se você estiver usando JavaScript:

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

7
@ user1296175 Qual foi o seu código final para conseguir isso? Eu quero fazer o mesmo.
Alphamale

4
Obrigado @nobita, adicione data-backdrop = "static" faz o truque! O documento de inicialização do Twitter é ruim :(
Blue Smith

2
Verifique resposta do @@ Varun Chatterji e incluir isso em sua definição modal
Leandro

1
desabilite o clique externo para todos os modais com uma única linha de js: $ .fn.modal.Constructor.DEFAULTS.backdrop = 'static';
Lukas Liesis 6/03/2015

1
Para usuários angulares: var modalInstance = $ modal.open ({templateUrl: 'modalTemplate.html', controller: 'modalController', pano de fundo: 'static',});
Alexandr

310

Basta definir a backdroppropriedade para 'static'.

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

Você também pode definir a keyboardpropriedade como, falseporque isso impede que o modal seja fechado pressionando a Esctecla no teclado.

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

myModal é o ID da div que contém seu conteúdo modal.


6
Sim, esta é a resposta mais limpa e simples (pois evita adicionar atributos de dados). Para referência, backdrope keyboardsão mencionados aqui em sua documentação na seção Opções .
Jesse Dupuy

Os atributos de dados devem ser evitados? Por favor, orientar sobre isso.

@GopalAggarwal: Depende de como você configura o modal. Se você associar um modal a várias tags de âncora, o uso de atributos de dados poderá fazer sentido. Mas quando há apenas um modal por tag, eu usaria os parâmetros de script em que todo comportamento é visível em um só lugar.
Nirmal

7
Também para evitar a exibição modal, passe imediatamente show: false
ClearCloud8 5/15

214

Você também pode incluir esses atributos na própria definição modal:

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

4
Sim, essa é a resposta mais limpa e simples (pois funciona adicionando atributos de dados). Para referência, o pano de fundo e o teclado são mencionados aqui em sua documentação na seção Opções.
floww

Se você iniciar o modal no carregamento da página, é a melhor maneira de remover outras opções de fechamento.
santa

46

Se você já inicializou a janela modal, convém redefinir as opções com $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})para garantir que as novas opções serão aplicadas.


1
Isso me ajudou. Depois de definir o "pano de fundo: 'estático'", o usuário ainda pode fechar o modal com um clique; parecia um bug, mas isso fez o truque!
Omar

7
Por enquanto: $ ('# modal'). RemoveData ('bs.modal'). Modal ({backdrop: 'static', keyboard: false});
D3VELOPER

34

Substitua o evento Bootstrap 'hide' do Dialog e interrompa seu comportamento padrão (para descartar o diálogo).

Veja o trecho de código abaixo:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

Funciona bem no nosso caso.


2
então, como reverter isso?
precisa saber é o seguinte

3
Apenas elegante. thx :) E o @sertaconay apenas cria uma variável booleana (por exemplo) que será verificada para decidir se você deseja impedir o padrão
Nimrod Yonatan Ben-Nes

1
única opção aqui que funcionou depois que um modal foi
aberto

2
Esta é uma solução perfeita se você deseja ter um controle mais preciso sobre quando os modais podem ser fechados e quando não estão.
Curos

33

Sim, você pode fazer assim:

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

Isso é perfeito para um caso em que o modal é declarado no html e aberto apenas via javascript - ou seja, não há link para ele. Obrigado!
Hgolov 15/05

22

Como a resposta de @ AymKdn, mas isso permitirá que você altere as opções sem reinicializar o modal.

$('#myModal').data('modal').options.keyboard = false;

Ou, se você precisar fazer várias opções, o JavaScript é withútil aqui!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

Se o modal já estiver aberto, essas opções entrarão em vigor na próxima vez em que o modal for aberto.


stackoverflow.com/questions/16030448/... mas eu não gosto dessa solução embora
Victor

14

Basta adicionar essas duas coisas

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

Vai ficar assim agora

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

Ele desativará o botão de escape e também o clique em qualquer lugar e ocultará.


Este conselho foi fornecido anos antes.
Mckmackusa 11/12/19

11

Você pode desativar o comportamento de clicar para fechar o plano de fundo e torná-lo o padrão para todos os seus modais adicionando esse JavaScript à sua página (verifique se ele é executado após o carregamento do jQuery e do Bootstrap JS):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

6

Como o D3VELOPER diz, o seguinte código o resolve:

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

Estou usando jquery e bootstrap e simplesmente removeData('modal')não funciona.


4

O melhor que encontrei é adicionar este código ao link

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

2

Caso alguém venha aqui do Google tentando descobrir como impedir alguém de fechar um modal, não esqueça que também há um botão Fechar no canto superior direito do modal que precisa ser removido.

Eu usei algum CSS para escondê-lo:

#Modal .modal-header button.close {
    visibility: hidden;
}

Observe que usar "display: none;" é substituído quando o modal é criado, portanto, não use isso.


Você também não pode apenas remover o botão do cabeçalho modal?
foop

Às vezes, é benéfico usar CSS em vez de alterar o HTML.
Drew

2

Se você deseja desabilitar condicionalmente o backdrop click closingrecurso. Você pode usar a seguinte linha para definir a backdropopção staticdurante o tempo de execução.

Bootstrap v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

Bootstrap v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

Isso impedirá o fechamento de um modelo já instanciado com a backdropopção definida como false( o comportamento padrão ).


2

Você pode definir o comportamento padrão do pop-up modal usando a linha de código abaixo:

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

como +1 neste método, não quero essa opção para todos os modais.
tsohr

2

Fazer isso é muito fácil hoje em dia. Basta adicionar:

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

No seu divisor modal.


Este conselho foi fornecido anos antes nesta mesma página.
Mckmackusa 11/11/19

1

Bem, esta é outra solução que alguns de vocês podem estar procurando (como eu estava ..)

Meu problema era semelhante, a caixa modal estava fechando enquanto o iframe que eu tinha dentro estava carregando, então tive que desativar a dispensa modal até que o iframe terminasse de carregar e reative-o.

As soluções apresentadas aqui não estavam funcionando 100%.

Minha solução foi esta:

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

Portanto, impeço temporariamente que o Modal se feche com:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

Mas com o var is_loading que permitirá o fechamento após o carregamento do Iframe.


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>

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.