Comment ouvrir une fenêtre modale Bootstrap en utilisant jQuery?

769

J'utilise la fonctionnalité de la fenêtre modale Twitter Bootstrap. Quand quelqu'un clique sur soumettre sur mon formulaire, je veux afficher la fenêtre modale en cliquant sur le "bouton soumettre" 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();
});
javascript jquery twitter-bootstrap user244394
la source
Vous avez une faute de frappe dans votre option show. Cela prend un booléen, donc ne mettez pas de guillemets autour de 'false' - $ ('# my-modal'). Modal ({show: false});
Darren Parker

Réponses:

1413

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 la section des méthodes .

Il vous faudrait donc changer:

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

à:

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

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

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

Chasse
la source
5
Je ne sais pas pourquoi cela ne fonctionne pas dans mon cas. J'ai le même code de démonstration dans ma page et j'ai codé le bouton d'envoi comme ci-dessus. Cependant, lorsque je clique sur soumettre, la fenêtre modale clignote rapidement et disparaît. Je dois cliquer sur le bouton «Retour» du navigateur pour retourner la page.
Chris22
6
J'ai trouvé la réponse ici à mon commentaire ci-dessus. Lien en double vers bootrap.js sur les pages du site.
Chris22
1
TypeError non récupéré: $ (...). Modal n'est pas une fonction, c'est probablement moi mais des idées pourquoi j'obtiens cette erreur? (j'ai jQuery)
Vladimir verleg
4
J'ai découvert mon problème, j'ai fait un appel ajax à un fichier contenant Jquery. Si jQuery est inclus 2 fois, cela ne fonctionne pas!
Vladimir verleg
2
J'ai essayé .modal('show')mais dans le navigateur Google Chrome, cela ne fonctionne pas
Durga
89

De plus, vous pouvez utiliser via l'attribut data

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

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

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

Gandarez
la source
4
Pour clarifier: "pas besoin d'utiliser javascript" signifie "pas besoin d'écrire javascript", javascript est toujours utilisé. J'ai essayé de modifier la réponse, mais elle a été rejetée car elle n'était pas "plus précise". Si vous essayez le code ci-dessus avec javascript désactivé, cela ne fonctionnera pas. Cela signifie que vous utilisez javascript pour moi.
npretto
83

Le plus souvent, lorsque $('#myModal').modal('show');cela ne fonctionne pas, cela est dû au fait d'avoir inclus deux fois jQuery. L'inclusion de jQuery 2 fois empêche les modaux de fonctionner.

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

De plus, certains plugins provoquent également des erreurs, dans ce cas, ajoutez 

jQuery.noConflict(); 
$('#myModal').modal('show');
Vladimir verleg
la source
3
DataTables avec sa version jQuery préemballée a causé cela pour moi
Wesley Smith
2
Merci beaucoup. J'ai le même problème: le modal n'est pas une fonction. Mais après avoir ajouté jQuery.noConflict (), cela fonctionne.
Jobayer Ahmmed
1
Il convient de noter que cette solution de contournement ne doit être utilisée que si vous ne pouvez pas résoudre la cause racine (c'est-à-dire n'inclure jQuery qu'une seule fois). Si un plugin tiers l'inclut, recherchez la version non incluse ou contactez le tiers pour en créer une.
rybo111
19

Appelez simplement la méthode modale (sans passer de paramètres) à l'aide du jQuerysélecteur.

Voici un exemple:

$('#modal').modal();
Brane
la source
1
Comment passer plus de paramètres à mon modal? Par exemple, un ID (dynamique) spécifique?
Pathros
1
Comment faites-vous pour que votre ID soit dynamique? Le faites-vous par ID? si oui, vous pouvez utiliser la fonctionnalité $ (this) de jQuery pour sélectionner l'objet courant et lui passer des paramètres.
Brane
13

Si vous utilisez la fonction onclick des liens pour appeler un modal 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>

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

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

Voici comment charger l'alerte d'amorçage dès que le document est prêt. Il est très facile d'ajouter simplement

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

J'ai fait une 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>
Développer l'extrait

csandreas1
la source
10

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>
A.Aleem11
la source
7

J'ai essayé plusieurs méthodes qui ont échoué, mais les suivantes ont fonctionné pour moi comme un charme:

$('#myModal').appendTo("body").modal('show');
l'habituel
la source
2
Même! C'est aussi la seule solution qui a fonctionné pour moi.
pengz
Êtes-vous sûr qu'il ne voulait pas .appendTo("modal-body")?
James A Mohler
@novembersky, vous devez mettre le code dans l'événement click ou lors du chargement de la page en utilisant jquery: $ (document) .ready (function () {$ ("# myModal"). modal ();});
Abhijit Kumar
7

Essayez d'utiliser jQuery au lieu de $ sign lors de l'appel de la fonction, cela a fonctionné dans mon cas comme vous pouvez le voir ci-dessous.

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

jQuery.noConflict (); car lorsque jQuery ('# myModal'). modal ('show'); ne fonctionne pas, cela est dû au fait d'avoir inclus jQuery deux fois. L'inclusion de jQuery 2 fois empêche les modaux de fonctionner. et cela résoudrait le problème dans ce cas, comme dans mon cas, il se répète.

Plus loin, vous pouvez aller sur ce lien

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

IB
la source
4

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 écrase 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>
Nikhil Mohadikar
la source
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>

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

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

Essaye ça

myModal1 est l'id de modal

$('#myModal1').modal({ show: true });
vivek
la source
0 
<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>
Sahnosh Rahguzar
la source
3
Lorsque vous répondez à des questions qui ont déjà des réponses, essayez de développer les réponses existantes. De plus, c'est généralement une bonne idée d'inclure une explication de la façon dont votre code répond à la question.
Chris Camaratta
0

Bootstrap 4.3 - plus ici

Afficher l'extrait de code

Kamil Kiełczewski
la source