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


J'utilise Twitter Bootstrap fonctionnalité de la fenêtre modale. Quand quelqu'un clique sur soumettre sur mon formulaire, je veux montrer 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 Wizzard 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();
});

547
2017-11-01 18:52


origine


Réponses:


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

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

Vous pouvez voir plus ici: Composant modal Bootstrap

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

Donc vous devrez changer:

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

à:

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

Si vous souhaitez personnaliser votre propre fenêtre, voici une vidéo suggérée par un autre membre de la communauté:

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


1007
2017-11-01 18:57



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'utiliser javascript.

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


66
2017-08-28 17:11



Le plus souvent, quand $('#myModal').modal('show'); ne fonctionne pas, il est causé par l'inclusion de jQuery deux fois. Y compris jQuery 2 fois fait que les modals ne travaillent pas.

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

De plus, certains plugins provoquent aussi des erreurs, dans ce cas ajouter

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

49
2018-01-19 07:24



Appelez simplement la méthode modale (sans passer de paramètres) en utilisant jQuery sélecteur.

Voici un exemple:

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

12
2018-02-06 19:21



Si vous utilisez la fonction onclick de 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>

9
2018-04-18 06:42



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 placer 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>

8
2018-01-14 21:16



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

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

5
2018-06-08 03:33



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é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>


5
2017-08-26 13:57



<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizzard 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();
    });
});

1
2017-10-12 10:44