web-dev-qa-db-fra.com

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

J'utilise Twitter Bootstrap fonctionnalité de la fenêtre modale. Lorsque quelqu'un clique sur Soumettre sur mon formulaire, je souhaite afficher la fenêtre modale en cliquant sur le bouton "Soumettre" du 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();
});
javascriptjquerytwitter-bootstrap
676
user244394

Bootstrap a quelques fonctions qui peuvent être appelées manuellement sur les modaux:

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

Vous pouvez en voir plus ici: composant modal Bootstrap

Plus précisément, le section methods .

Donc, vous auriez besoin de changer:

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

à:

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

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

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

1243
Chase

En outre, vous pouvez utiliser via 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 en javascript.

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

81
Gandarez

Le plus souvent, lorsque $('#myModal').modal('show'); ne fonctionne pas, cela est dû à l'inclusion de jQuery à deux reprises. Si jQuery est inclus 2 fois, les modaux ne fonctionnent pas.

Supprimez l'un des liens pour le faire fonctionner à nouveau.

De plus, certains plugins causent aussi des erreurs, dans ce cas ajoutez

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

Appelez simplement la méthode modale (sans passer aucun paramètre) en utilisant le sélecteur jQuery.

Voici un exemple:

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

Si vous utilisez la fonction onclick de links pour appeler un modal par jQuery, le "href" ne peut pas être null.

Par exemple:

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

function openModal(){

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

Le modal ne peut pas montrer. Le bon code est:

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

Voici comment charger bootstrap alert dès que le document est prêt. Il est très facile d'ajouter

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

J'ai fait un démo sur 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>
10
csandreas1

Découvrez la solution complète ici:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h

Assurez-vous de mettre les bibliothèques dans l'ordre requis pour obtenir le résultat:

1- Premier bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js

(En d'autres termes, jquery.min.js doit être appelé avant 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>
9
A.Aleem11

J'ai essayé plusieurs méthodes qui ont échoué, mais ci-dessous a fonctionné pour moi comme un charme:

$('#myModal').appendTo("body").modal('show');
5
novembersky

Essayez d’utiliser jQuery au lieu du signe $ lors de l’appel de la fonction. travaillé dans mon cas comme vous pouvez le voir ci-dessous.

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

jQuery.noConflict (); car quand jQuery ('# myModal'). modal ('show'); ne fonctionne pas, c'est parce que jQuery a été inclus deux fois. Si jQuery est inclus 2 fois, les modaux ne fonctionnent pas. et cela résoudrait le problème dans ce cas, comme dans mon cas, cela se répète.

De plus, vous pouvez aller à ce lien

La fenêtre du modèle Bootstrap ne s'affiche pas en appelant via JQuery

4
I B

Essayer

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

Pour ouvrir ou fermer le modal avec id myModal.

Si ce qui précède ne fonctionne pas, cela signifie que bootstrap.js a été remplacé par un autre fichier js. Voici une solution

1: - Déplacez bootstrap.js vers le bas pour qu’il remplace les autres fichiers js.

2: - Assurez-vous que la commande est comme ci-dessous

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

Vous pouvez lancer le modal avec le code ci-dessous.

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

Essaye ça

myModal1 est l'id de modal

$ ('# myModal1'). modal ({show: true});

0
vivek