930 votes

user244394 avatar

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

Demandé el 1 de Novembre, 2012
Quand la question a-t-elle été
72852 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la 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();
});
Demandé el 1 de Novembre, 2012 par user244394

0 votes

Avatar de Darren Parker

Vous avez une faute de frappe dans votre option d'affichage. Elle prend un booléen, donc ne mettez pas de guillemets à 'false' - $('#my-modal').modal({show : false}) ;

Commenté el 11 de Mars, 2016 par Darren Parker

Réponses

Trop de publicités?

15voto

csandreas1 avatar
csandreas1 Points 692

Voici comment charger l'alerte bootstrap dès que le document est prêt. C'est très simple, il suffit d'ajouter

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

J'ai fait un Démonstration 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>
Répondu el 26 de Août, 2017 par csandreas1 (692 Points )

11voto

Aleem Ahmed Qureshi avatar
Aleem Ahmed Qureshi Points 11

Découvrez la solution complète ici :

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

Veillez à placer les bibliothèques dans l'ordre requis pour obtenir un 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>
Répondu el 14 de Janvier, 2017 par Aleem Ahmed Qureshi (11 Points )

11voto

I B avatar
I B Points 245

Essayez d'utiliser jQuery au lieu de $ 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() ; parce que lorsque jQuery('#myModal').modal('show') ; ne fonctionne pas, c'est parce que vous avez inclus jQuery deux fois. Inclure jQuery 2 fois fait que les modales ne fonctionnent pas. et cela résoudrait le problème dans ce cas, car dans mon cas, il se répète.

Vous pouvez également consulter ce lien

La fenêtre du modèle Bootstrap ne s'affiche pas lorsqu'on l'appelle via JQuery

Répondu el 14 de Décembre, 2018 par I B (245 Points )

11voto

Sahnosh Rahguzar avatar
Sahnosh Rahguzar Points 59 
<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>
Répondu el 8 de Décembre, 2019 par Sahnosh Rahguzar (59 Points )

4 votes

Avatar de Chris Camaratta

Lorsque vous répondez à des questions pour lesquelles il existe déjà des réponses, essayez de développer les réponses existantes. Il est également conseillé d'expliquer comment votre code répond à la question.

Commenté el 9 de Décembre, 2019 par Chris Camaratta

9voto

novembersky avatar
novembersky Points 332

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

$('#myModal').appendTo("body").modal('show');
Répondu el 8 de Juin, 2017 par novembersky (332 Points )

3 votes

Avatar de pengz

La même chose ! C'est la seule solution qui a fonctionné pour moi aussi.

Commenté el 26 de Mars, 2018 par pengz

0 votes

Avatar de James A Mohler

Tu es sûr qu'il ne voulait pas .appendTo("modal-body") ?

Commenté el 8 de Mai, 2018 par James A Mohler

0 votes

Avatar de Abhijit Kumar

@novembersky, vous devez mettre le code dans l'événement de clic ou lorsque la page se charge en utilisant jquery : $(document).ready(function(){ $("#myModal").modal() ; }) ;

Commenté el 8 de Août, 2018 par Abhijit Kumar
Afficher 1 autres commentaires

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X