No permitir que se cierre la ventana modal de Twitter Bootstrap

Estoy creando una ventana modal usando Twitter Bootstrap. El comportamiento predeterminado es que si hace clic fuera del área modal, el modal se cerrará automáticamente. Me gustaría deshabilitar eso, es decir, no cerrar la ventana modal al hacer clic fuera del modal.

¿Alguien puede compartir el código jQuery para hacer esto?

Creo que desea establecer el valor de fondo en estático . Si desea evitar que la ventana se cierre al usar la Esctecla, debe establecer otro valor.

Ejemplo:

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

O si está utilizando JavaScript:

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

Simplemente configure la backdroppropiedad en 'static'.

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

También es posible que desee establecer la keyboardpropiedad en falseporque eso evita que se cierre el modal presionando la Esctecla en el teclado.

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

myModal es la ID del div que contiene su contenido modal.

También puede incluir estos atributos en la definición modal en sí:

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

Si ya ha inicializado la ventana modal, es posible que desee restablecer las opciones $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})para asegurarse de que aplicará las nuevas opciones.

Anule el evento Bootstrap 'hide' de Diálogo y detenga su comportamiento predeterminado (para eliminar el diálogo).

Consulte el fragmento de código a continuación:

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

       e.preventDefault();
   });

Funciona bien en nuestro caso.

Sí, puedes hacerlo así:

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

Como la respuesta de @ AymKdn, pero esto le permitirá cambiar las opciones sin reiniciar el modal.

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

O si necesita hacer varias opciones, ¡JavaScript es withútil aquí!

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

Si el modal ya está abierto, estas opciones solo tendrán efecto la próxima vez que se abra el modal.

Solo agrega estas dos cosas

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

Se verá así ahora

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

Desactivará el botón de escape y también el clic en cualquier lugar y se ocultará.

Puede deshabilitar el comportamiento de hacer clic para cerrar el fondo y hacer que este sea el predeterminado para todos sus modales agregando este JavaScript a su página (asegúrese de que se ejecute después de cargar jQuery y Bootstrap JS):

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

Como dice D3VELOPER, el siguiente código lo resuelve:

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

Estoy usando jquery y bootstrap y simplemente removeData('modal')no funcionan.

Lo mejor que encontré es agregar este código al enlace

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

En caso de que alguien venga de Google tratando de descubrir cómo evitar que alguien cierre un modal, no olvide que también hay un botón de cierre en la parte superior derecha del modal que debe eliminarse.

Usé un poco de CSS para ocultarlo:

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

Tenga en cuenta que usando "display: none;" se sobrescribe cuando se crea el modal, así que no lo uses.

Si desea deshabilitar condicionalmente la backdrop click closingfunción. Puede usar la siguiente línea para establecer la backdropopción staticdurante el tiempo de ejecución.

Bootstrap v3.xx

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

Bootstrap v2.xx

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

Esto evitará que se cierre un modelo ya instanciado con la backdropopción establecida en false( el comportamiento predeterminado ).

Puede establecer el comportamiento predeterminado de la ventana emergente modal utilizando la siguiente línea de código:

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

Hacer eso es muy fácil hoy en día. Solo agrega:

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

En tu divisor modal.

Bueno, esta es otra solución que algunos de ustedes podrían estar buscando (como yo ...)

Mi problema era similar, el cuadro modal se estaba cerrando mientras el iframe que tenía dentro se estaba cargando, por lo que tuve que deshabilitar el descarte modal hasta que el Iframe termine de cargarse y luego volver a habilitarlo.

Las soluciones presentadas aquí no funcionaban al 100%.

Mi solución fue 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;
     });
}};

Entonces evito temporalmente que el Modal se cierre con:

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

Pero con var is_loading que volverá a habilitar el cierre después de que se cargue el 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 actualizar el estado del telón de fondo en Bootstrap 4.1.3 después de que se haya visualizado el modal, utilizamos la siguiente línea del complemento Bootstrap-Modal-Wrapper . Referencia del código del repositorio de complementos .

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