Cerrar Modo Bootstrap
Tengo un cuadro de diálogo modal de bootstrap que quiero mostrar inicialmente, luego cuando el usuario hace clic en la página, desaparece. Tengo lo siguiente:
$(function () {
$('#modal').modal(toggle)
});
<div class="modal" id='modal'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Error:</h3>
</div>
<div class="modal-body">
<p>Please correct the following errors:</p>
</div>
</div>
</div>
El modal se muestra inicialmente, pero no se cierra cuando se hace clic fuera del modal. Además, el área de contenido no está en gris.. ¿Cómo puedo hacer que el modal se muestre inicialmente y luego se cierre después de que el usuario haga clic fuera del área? ¿Y cómo puedo conseguir que el fondo sea gris como en la demo?
19 answers
Pon modal('toggle') en lugar de modal(toggle)
$(function () {
$('#modal').modal('toggle');
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-11 03:19:28
Para cerrar bootstrap modal puede pasar 'hide' como opción al método modal de la siguiente manera
$('#modal').modal('hide');
Por favor, echa un vistazo a trabajar fiddle aquí
Bootstrap también proporciona eventos que puede enganchar a la funcionalidad modal , como si desea disparar un evento cuando el modal ha terminado de ocultarse al usuario, puede usar hidden. bs. modal event puede leer más sobre los métodos y eventos modales aquí en Documentación
Si ninguno de los métodos anteriores funciona, dale un id a tu botón cerrar y activa el clic en el botón cerrar.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-25 06:01:42
$('#modal').modal('toggle');
O
$('#modal').modal().hide();
Debería funcionar.
Pero si nada más funciona puedes llamar al botón de cierre modal directamente:
$("#modal .close").click()
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-09 12:04:50
Esto funcionó para mí:
<span class="button" , data-dismiss="modal" aria-label="Close">cancel</span>
Utilice este enlace cierre modal
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-12 12:15:11
$("#your-modal-id").modal('hide');
Ejecutar esta llamada a través de la clase ($(".my-modal")) no funcionará.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-05 10:22:26
Este es bastante bueno y también funciona en angular 2
$("#modal .close").click()
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-01 05:58:56
Mis cinco centavos en este caso es que no quiero tener que apuntar al modal de bootstrap con un id y viendo que solo debería haber un modal a la vez, lo siguiente debería ser suficiente para eliminar el modal ya que toggle podría ser peligroso:
$('.modal').removeClass('show');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-11 09:26:36
En algunas circunstancias, el error de escritura podría ser el culpable. Por ejemplo, asegúrese de tener:
data-dismiss="modal"
Y no
data-dissmiss="modal"
Observe el doble "ss" en el segundo ejemplo que hará que el botón de cierre falle.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-13 09:48:00
Podemos cerrar la ventana emergente modal de las siguientes maneras:
// We use data-dismiss property of modal-up in html to close the modal-up,such as
<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>
// We can close the modal pop-up through java script, such as
<div class='modal fade pageModal' id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>
$('#openModal').modal('hide'); //Using modal pop-up Id.
$('.pageModal').modal('hide'); //Using class that is defined in modal html.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-05 08:19:04
$('.modal.in').modal('hide');
Utilice el código anterior para ocultar el telón de fondo de modal si está utilizando múltiples pop modal en una página.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-18 14:52:39
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
$('#myModal').modal('show');
});
$(function () {
$('#modal').modal('toggle');
});
</script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-11 07:04:11
function Delete(){
var id = $("#dgetid").val();
debugger
$.ajax({
type: "POST",
url: "Add_NewProduct.aspx/DeleteData",
data: "{id:'" + id + "'}",
datatype: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
if (result.d == 1) {
bindData();
setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
}
}
});
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-09 11:18:19
Usando modal.ocultar sólo ocultaría el modal. Si está utilizando superposición debajo del modal, todavía estaría allí. utilice click call para cerrar realmente el modal y eliminar la superposición.
$("#modalID .close").click()
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-22 22:39:43
Otra forma de hacer esto es que primero se elimina la clase modal-open, que cierra el modal. A continuación, elimine la clase modal-backdrop que elimina la cubierta grisácea del modal.
Se puede utilizar el siguiente código:
$('body').removeClass('modal-open')
$('.modal-backdrop').remove()
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-17 08:35:48
En mi caso, la página principal desde donde se activó el modal de bootstrap comenzó a no responder después de usar $("#modal").modal('toggle'); way, pero comenzó a responder de la siguiente manera:
$("#submitBtn").on("click",function(){
$("#submitBtn").attr("data-dismiss","modal");
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-20 13:43:39
Además, puede "hacer clic" en una 'x', que cierra el diálogo. Por ejemplo:
$(".ui-dialog-titlebar-close").click();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-10 21:10:39
Este código funcionó perfectamente para mí para cerrar un modal (estoy usando bootstrap 3.3)
$('#myModal').removeClass('in')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-13 17:31:54
Puede usar;
$('#' + $('.modal.show').attr('id')).modal('hide');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-05 12:53:04
Cerré modal Programáticamente con este truco
Agregue un botón en modal con data-dismiss="modal" y oculte el botón con display: none. Así es como se verá
<div class="modal fade" id="addNewPaymentMethod" role="dialog">
<div class="modal-dialog">
.
.
.
<button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
</div>
</div>
Ahora, cuando desee cerrar modal mediante programación, simplemente active un evento de clic en ese botón, que no es visible para el usuario
En Javascript puede activar haga clic en ese botón como este:
document.getElementById('close-modal').click();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-30 12:19:55