javascript - sirve - Deshabilitar el clic fuera del área modal de arranque para cerrar modal
modal bootstrap 4 (12)
Agregue el css a continuación como desea que el ancho de su pantalla.
@media (min-width: 991px){
.modal-dialog {
margin: 0px 179px !important;
}
}
Estoy haciendo un sitio web de bootstrap, con un par de ''Modals'' de Bootstrap. Estoy tratando de personalizar algunas de las características predeterminadas.
El problema es este; Puedes cerrar el modal haciendo clic en el fondo. ¿Hay alguna forma de deshabilitar esta característica? ¿Sólo en modales específicos?
En mi aplicación, estoy usando el siguiente código para mostrar el modo Bootstrap a través de jQuery.
$(''#myModall'').modal({
backdrop: ''static'',
keyboard: true,
show: true
});
Este es el más fácil.
Puede definir su comportamiento modal, definiendo el teclado de datos y el fondo de datos.
<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
Hay dos formas de deshabilitar el clic fuera del área del modelo bootstrap para cerrar modal
usando javascript
$(''#myModal'').modal({ backdrop: ''static'', keyboard: false });usando el atributo de datos en la etiqueta HTML
data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
La solución que me funciona es la siguiente:
$(''#myModal'').modal({backdrop: ''static'', keyboard: false})
Fondo: desactivado el clic fuera del evento
teclado: deshabilitado el evento de palabra clave scape
Mira esto ::
$(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>
Otra opción si no sabe si el modal ya se abrió o no y necesita configurar las opciones modales:
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
}
}
Para mí hubo una confusión entre bootstrap modal y jQuery modal. Esto hizo el truco (para jQuery modal )
$("#sticky").modal({
escapeClose: false,
clickClose: false,
showClose: false
});
Puede usar un atributo como este: data-backdrop="static" o con javascript:
$(''#myModal'').modal({
backdrop: ''static'',
keyboard: false // to prevent closing with Esc button (if you want this too)
})
Ver esta respuesta también: No permitir que se cierre la ventana modal de arranque de Twitter
Puedes usar
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = ''static'';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard = false;
para cambiar el comportamiento por defecto.
También puedes hacer esto sin usar JQuery, así:
<div id="myModal">
var modal = document.getElementById(''myModal'');
modal.backdrop = "static";
modal.keyboard = false;
En el capítulo Opciones, en la página que vinculó, puede ver la opción de backdrop . Pasar esta opción con un valor ''static'' evitará que se cierre el modal.
Como @PedroVagner señaló los comentarios, también puede pasar {keyboard: false} para evitar que se cierre el modal presionando Esc .
Si abres el modal por js usa:
$(''#myModal'').modal({backdrop: ''static'', keyboard: false})
Si está utilizando atributos de datos, use:
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>`