Proibir o fechamento da janela modal do Twitter Bootstrap

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?

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

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.

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

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

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.

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.

Sim, você pode fazer assim:

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

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.

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

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

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.

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>

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.

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

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

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

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

No seu divisor modal.

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.

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

Para atualizar o estado do pano de fundo no Bootstrap 4.1.3 após a exibição do modal, usamos a seguinte linha do plugin Bootstrap-Modal-Wrapper . Referência de código do repositório de plugins .

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");