javascript - abrir ventana modal bootstrap con jquery
¿Cómo abrir una ventana modal de Bootstrap usando jQuery? (10)
Además se puede utilizar a través del atributo de datos.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
En este caso particular, no es necesario utilizar javascript.
Puedes ver más aquí: http://getbootstrap.com/2.3.2/javascript.html#modals
Estoy usando la funcionalidad de ventana modal de Twitter Bootstrap. Cuando alguien haga clic en enviar en mi formulario, quiero mostrar la ventana modal al hacer clic en el botón "enviar" del formulario.
<form id="myform" class="form-wizard">
<h2 class="form-wizard-heading">BootStap Wizard Form</h2>
<input type="text" value=""/>
<input type="submit"/>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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>
jQuery:
$(''#myform'').on(''submit'', function(ev) {
$(''#my-modal'').modal({
show: ''false''
});
var data = $(this).serializeObject();
json_data = JSON.stringify(data);
$("#results").text(json_data);
$(".modal-body").text(json_data);
// $("#results").text(data);
ev.preventDefault();
});
Aquí se explica cómo cargar la alerta de arranque tan pronto como el documento esté listo. Es muy fácil solo añadir
$(document).ready(function(){
$("#myModal").modal();
});
Hice una demo en W3Schools.
<!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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
<!-- Trigger the modal with a 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>
<script>
$(document).ready(function(){
$("#myModal").modal();
});
</script>
</body>
</html>
Bootstrap tiene algunas funciones que se pueden llamar manualmente en los modales:
$(''#myModal'').modal(''toggle'');
$(''#myModal'').modal(''show'');
$(''#myModal'').modal(''hide'');
Puedes ver más aquí: Bootstrap modal componente
Específicamente la sección de métodos .
Así que necesitarías cambiar:
$(''#my-modal'').modal({
show: ''false''
});
a:
$(''#myModal'').modal(''show'');
Si desea crear una ventana emergente personalizada, aquí hay un video sugerido por otro miembro de la comunidad:
Echa un vistazo a la solución completa aquí:
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h
Asegúrese de poner las bibliotecas en el orden requerido para obtener el resultado:
1- Primero bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js
(En otras palabras, jquery.min.js debe llamarse antes de bootstrap.min.js)
<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/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Más a menudo, cuando $(''#myModal'').modal(''show''); no funciona, es causada por haber incluido jQuery dos veces. Incluir jQuery 2 veces hace que los modales no funcionen.
Eliminar uno de los enlaces para que funcione de nuevo.
Además, algunos complementos también causan errores, en este caso agregar
jQuery.noConflict();
$(''#myModal'').modal(''show'');
Probé varios métodos que fallaron, pero el siguiente trabajo me funcionó a la perfección:
$(''#myModal'').appendTo("body").modal(''show'');
Si usa la función onclick de enlaces para llamar a un modal por jQuery, el "href" no puede ser nulo.
Por ejemplo:
... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">
function openModal(){
$(''#myModal'').modal();
}
</script>
El modal no puede mostrar. El código correcto es:
<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
Simplemente llame al método modal (sin pasar ningún parámetro) utilizando el selector jQuery .
Aquí está el ejemplo:
$(''#modal'').modal();
Tratar
$("#myModal").modal("toggle")
Para abrir o cerrar el modal con id myModal.
Si lo anterior no funciona, significa que bootstrap.js ha sido reemplazado por algún otro archivo js. Aquí hay una solución
1: - Mueva bootstrap.js a la parte inferior para que anule otros archivos js.
2: - Asegúrate de que el orden es como abajo
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
<form id="myform" class="form-wizard">
<h2 class="form-wizard-heading">BootStap Wizard Form</h2>
<input type="text" value=""/>
<input type="submit" id="submitButton"/>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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>
Puede iniciar el modal con el código debajo de este.
$(document).ready(function(){
$("#submitButton").click(function(){
$("#myModal").modal();
});
});