786 votos

¿Cómo abrir una ventana modal de Bootstrap con jQuery?

Estoy usando las ventanas modales de Twitter Bootstrap. Cuando alguien hace clic en enviar en el formulario, quiero mostrar la ventana modal.

 <form id="myform" class="form-wizard">

      <h2 class="form-wizard-heading">BootStap Wizzard 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>

$('#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();
    });

1447voto

Chase Puntos 7329

Bootstrap tiene un par de funciones que pueden ser llamadas manualmente en los modales:

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

Puedes ver más aquí: componente modal de Bootstrap

Por lo que tendría que cambiar:

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

a:

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

89voto

Gandarez Puntos 557

Además, usted puede utilizar los atributos data-

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

En este caso particular no es necesario el uso de JS.

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

-7voto

Yuri Malov Puntos 36

Es mi manera:

index.html.slim
Botón de inserción:

input.btn.btn-primary type="button" data-toggle="modal" data-target="#myModal" value="Modal"

Insertar ventana modal:

#myModal.modal.fade aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
  .modal-dialog
    .modal-content
      .modal-header
        button.close data-dismiss="modal" type="button"
          span aria-hidden="true"  &times;
          span.sr-only Close
        h4#myModalLabel.modal-title Choose of route
      .modal-body
        = image_tag("map.png")
      .modal-footer
        button.btn.btn-default data-dismiss="modal" type="button" Close
        button.btn.btn-primary type="button"  Save changes

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X