Comment ouvrir une fenêtre modale Bootstrap en utilisant jQuery?
J'utilise la fonctionnalité de fenêtre modale Twitter Bootstrap. Lorsque 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 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();
});
10 réponses
Bootstrap a quelques fonctions qui peuvent être appelées manuellement sur les auxiliaires 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 méthodes .
Vous devez donc changer:
$('#my-modal').modal({
show: 'false'
});
À:
$('#myModal').modal('show');
Si vous cherchez à créer votre propre popup personnalisé, voici une vidéo suggérée par un autre membre de la Communauté:
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 en voir plus ici: http://getbootstrap.com/2.3.2/javascript.html#modals
Le plus souvent, lorsque $('#myModal').modal('show'); ne fonctionne pas, cela est dû au fait que jQuery a été inclus deux fois. Y compris jQuery 2 fois fait modals de ne pas fonctionner.
Supprimez l'un des liens pour le faire fonctionner à nouveau.
En outre, certains plugins provoquent également des erreurs, dans ce cas, ajoutez
jQuery.noConflict();
$('#myModal').modal('show');
Appelez simplement la méthode modale (sans passer de paramètres) en utilisant jQuery selector.
Voici un exemple:
$('#modal').modal();
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 s'afficher. Le bon code est:
<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
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>
Voici comment charger l'alerte bootstrap dès que le document est prêt. Il est très facile il suffit d'ajouter
$(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">×</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>J'ai essayé plusieurs méthodes qui ont échoué, mais ce qui suit a fonctionné pour moi comme un charme:
$('#myModal').appendTo("body").modal('show');
Essayez
$("#myModal").modal("toggle")
Pour ouvrir ou fermer le modal avec l'id myModal.
Si ce qui précède ne fonctionne pas, cela signifie bootstrap.js a été remplacé par un autre fichier js. Voici une solution
1:- Déplacer des fichiers d'amorce.js vers le bas afin 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>
<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();
});
});