¿Cómo abrir una ventana modal Bootstrap usando jQuery?

769

Estoy usando la funcionalidad de la ventana modal de Twitter Bootstrap. Cuando alguien hace clic en enviar en mi formulario, quiero mostrar la ventana modal al hacer clic en el botón "enviar" en el 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();
});
javascript jquery twitter-bootstrap usuario244394
fuente
Tienes un error tipográfico en tu opción de mostrar. Toma un valor booleano, así que no ponga comillas alrededor de 'falso' - $ ('# my-modal'). Modal ({show: false});
Darren Parker

Respuestas:

1413

Bootstrap tiene algunas funciones que se pueden llamar manualmente en modales:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

Puedes ver más aquí: componente modal Bootstrap

Específicamente la sección de métodos .

Entonces necesitarías cambiar:

$('#my-modal').modal({
    show: 'false'
});

a:

$('#myModal').modal('show');

Si está buscando crear una ventana emergente personalizada, aquí hay un video sugerido de otro miembro de la comunidad:

https://www.youtube.com/watch?v=zK4nXa84Km4

Persecución
fuente
55
No estoy seguro de por qué esto no funciona en mi caso. Tengo el mismo código de demostración en mi página y codifiqué el botón de envío como se indica arriba. Sin embargo, cuando hago clic en Enviar, la ventana modal parpadea rápidamente y desaparece. Tengo que hacer clic en el botón "Atrás" del navegador para volver a la página.
Chris22
66
Encontré la respuesta aquí para mi comentario anterior. Enlace duplicado a bootrap.js en las páginas del sitio.
Chris22
1
TypeError no capturado: $ (...). Modal no es una función, probablemente soy yo, pero ¿alguna idea de por qué me sale este error? (Tengo jQuery)
Vladimir verleg
44
Descubrí mi problema, hice una llamada ajax a un archivo que incluía a Jquery. Si jQuery se incluye 2 veces, ¡no funciona!
Vladimir verleg
2
Lo intenté .modal('show')pero en el navegador Google Chrome no funciona
Durga
89

Además, puede usar el atributo de datos

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

En este caso particular, no necesita escribir javascript.

Puede ver más aquí: http://getbootstrap.com/2.3.2/javascript.html#modals

Gandarez
fuente
44
Para aclarar: "no es necesario usar javascript" significa "no es necesario escribir javascript", todavía se usa javascript. Traté de editar la respuesta pero fue rechazada porque no era "más precisa". Si prueba el código anterior con JavaScript deshabilitado, no funcionará. Eso significa que usas JavaScript para mí.
npretto
83

Muy a menudo, cuando $('#myModal').modal('show');no funciona, es causado por haber incluido jQuery dos veces. Incluir jQuery 2 veces hace que los modales no funcionen.

Elimine uno de los enlaces para que vuelva a funcionar.

Además, algunos complementos también causan errores, en este caso agregue 

jQuery.noConflict(); 
$('#myModal').modal('show');
Vladimir verleg
fuente
3
DataTables con su versión jQuery preempaquetada me causó esto
Wesley Smith
2
Muchas gracias. Tengo el mismo problema: modal no es una función. Pero después de agregar jQuery.noConflict (), funciona.
Jobayer Ahmmed
1
Cabe señalar que esta solución solo debe usarse si no puede resolver la causa raíz (es decir, solo incluya jQuery una vez). Si algún complemento de terceros lo incluye, busque la versión no incluida o póngase en contacto con el tercero para crear una.
rybo111
19

Simplemente llame al método modal (sin pasar ningún parámetro) usando el jQueryselector.

Aquí hay un ejemplo:

$('#modal').modal();
Brane
fuente
1
¿Cómo paso más parámetros a mi modal? Por ejemplo, una identificación específica (dinámica)?
Pathros
1
¿Cómo haces que tu ID sea dinámica? ¿Lo haces por identificación? en caso afirmativo, puede usar la funcionalidad $ (this) de jQuery para seleccionar el objeto actual y pasarle parámetros.
Brane
13

Si utiliza la función onclick de enlaces para llamar a un modal mediante 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 se puede mostrar. El código correcto es:

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
saneryee
fuente
12

Aquí se explica cómo cargar la alerta de arranque tan pronto como el documento esté listo. Es muy fácil solo agrega

 $(document).ready(function(){
   $("#myModal").modal();
});

Hice una demostración 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">&times;</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>
Expandir fragmento

csandreas1
fuente
10

Mira 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>
A.Aleem11
fuente
7

Probé varios métodos que fallaron, pero a continuación me funcionó de maravilla:

$('#myModal').appendTo("body").modal('show');
lo normal
fuente
2
¡Mismo! Esta es la única solución que también funcionó para mí.
pengz
¿Estás seguro de que no quería .appendTo("modal-body")?
James A Mohler
@novembersky, debe poner el código dentro del evento click o cuando la página se carga usando jquery: $ (document) .ready (function () {$ ("# myModal"). modal ();});
Abhijit Kumar
7

Intente usar jQuery en lugar de $ sign cuando llame a la función, funcionó en mi caso como puede ver a continuación.

jQuery.noConflict(); 
jQuery('#myModal').modal('show');

jQuery.noConflict (); porque cuando jQuery ('# myModal'). modal ('show'); no funciona, es causado por haber incluido jQuery dos veces. Incluir jQuery 2 veces hace que los modales no funcionen. y resolvería el problema en ese caso, ya que en mi caso se repite.

Además puedes ir a este enlace

La ventana del modelo Bootstrap no se muestra al llamar a través de JQuery

IB
fuente
4

Tratar

$("#myModal").modal("toggle")

Para abrir o cerrar el modal con id myModal.

Si lo anterior no funciona, significa que bootstrap.js ha sido anulado 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úrese de que el pedido sea el siguiente

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
Nikhil Mohadikar
fuente
4 
<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 esto.

$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});
Alperzkn
fuente
1

Prueba esto

myModal1 es el id de modal

$('#myModal1').modal({ show: true });
vivek
fuente
0 
<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>
Sahnosh Rahguzar
fuente
3
Cuando responda preguntas que ya tienen respuestas, intente ampliar las respuestas existentes. También es generalmente una buena idea incluir una explicación de cómo su código responde a la pregunta.
Chris Camaratta
0

Bootstrap 4.3 - más aquí

Mostrar fragmento de código

Kamil Kiełczewski
fuente