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

Bootstrap dispose de quelques fonctions qui peuvent être appelées manuellement sur les modales :

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

Vous pouvez en voir plus ici : Composant modal Bootstrap

Plus précisément, le section des méthodes .

Il faudrait donc que vous changiez :

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

à :

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

Si vous souhaitez créer votre propre fenêtre contextuelle personnalisée, voici une suggestion de vidéo d'un autre membre de la communauté :

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

Answer 2

Le plus souvent, lorsque $('#myModal').modal('show'); ne fonctionne pas, cela est dû au fait que vous avez inclus jQuery deux fois. Inclure jQuery 2 fois fait que les modales ne fonctionnent pas.

Supprimez l'un des liens pour que cela fonctionne à nouveau.

En outre, certains plugins provoquent également des erreurs, dans ce cas, ajoutez

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

Answer 3

En outre, vous pouvez utiliser l'attribut de données

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

Dans ce cas particulier, vous n'avez pas besoin d'écrire du javascript.

Vous pouvez en voir plus ici : http://getbootstrap.com/2.3.2/javascript.html#modals

Answer 4

Il suffit d'appeler la méthode modale (sans passer aucun paramètre) en utilisant jQuery sélecteur.

Voici un exemple :

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

Answer 5

Si vous utilisez la fonction onclick des liens pour appeler une modale par jQuery, le "href" ne peut pas être nul.

Par exemple :

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">

function openModal(){

    $('#myModal').modal();
}       
</script>

La modale ne peut pas s'afficher. Le bon code est :

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