Comment ouvrir une fenêtre modale Bootstrap à l'aide de jQuery ?

Question

J'utilise la fonctionnalité de fenêtre modale de Twitter Bootstrap. Lorsque quelqu'un clique sur "submit" dans mon formulaire, je veux afficher la fenêtre modale en cliquant sur le "bouton submit" dans le formulaire.

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

Answer 1

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Answer 2

C'est ma façon de faire :

index.html.slim
Insertion d'un bouton :

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

Insertion d'une fenêtre modale :

#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"  ×
          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