j'utilise l'exemple modal du bootstrap 3 docs. le modal fonctionne. Cependant, je dois accéder à l'événement show.bs.modal quand il se déclenche. pour l'instant j'essaie juste:
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
Rien ne se passe, l'événement ne se déclenche pas. Qu'est-ce que je fais mal??? Cela n'a pas de sens pour moi.
Assurez-vous de mettre votre on('shown.bs.modal')
avant d'instancier le modal pour qu'il apparaisse
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
ou
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
}).modal('show');
Pour vous concentrer sur un champ, il est préférable d’utiliser le shown.bs.modal
au lieu de show.bs.modal
, mais pour d’autres raisons, vous souhaitez masquer l’arrière-plan ou définir quelque chose juste avant que le modal ne commence à apparaître, utilisez la fonction show.bs.modal
.
utilisez ceci:
$(document).on('show.bs.modal','#myModal', function () {
alert('hi');
})
Enveloppez votre fonction dans $(document).ready(function() {
, ou plus simplement, $(function() {
. Dans CoffeeScript, cela ressemblerait à
$ ->
$('#myModal').on 'show.bs.modal', (event)->
Sans cela, JavaScript s'exécute avant le chargement du document et #myModal
ne fait pas encore partie du DOM. Voici la référence Bootstrap .
Essaye ça
$('#myModal').on('shown.bs.modal', function () {
alert('hi');
});
En utilisant shown
au lieu de show
, assurez-vous également que vos points-virgules sont à la fin de votre fonction et de votre alerte.
$(document).on('shown.bs.modal','.modal', function () {
/// TODO EVENTS
});
Une chose similaire m’est arrivée et j’ai résolu en utilisant setTimeout.
Bootstrap utilise le délai suivant pour terminer l'affichage:
c.TRANSITION_DURATION = 300, c.BACKDROP_TRANSITION_DURATION = 150,
Donc, utiliser plus de 300 doit fonctionner, et pour moi 200, cela fonctionne:
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})
N'oubliez pas de mettre le script après l'appel de "js/bootstrap", pas avant.
Dans mon cas, il me manquait le div .modal-dialog
Ne déclenche pas l'événement: shown.bs.modal
<div id="loadingModal" class="modal fade">
<p>Loading...</p>
</div>
Est-ce que l'événement feu: shown.bs.modal
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<p>Loading...</p>
</div>
</div>
J'ai eu un problème similaire mais différent et je ne pouvais toujours pas travailler lorsque j'utilise $ ('# myModal'). Je pouvais le faire fonctionner lorsque j'utilisais $ (window).
Mon autre problème est que j'ai constaté que l'événement show ne se déclencherait pas si je stockais mon contenu modal div html dans une variable javascript telle que.
var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
l'événement n'a jamais tiré parce qu'il ne s'est pas produit
ma solution était d'inclure les divs dans le corps html
<body>
<div id='myModal'>
...
</div>
<script>
$('#myModal).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
</script>
</body>
Assurez-vous de charger jQuery avant d’utiliser Bootstrap. Cela semble simple, mais j’ai eu du mal à saisir ces événements modaux et il s’est avéré que l’erreur n’était pas liée à mon code mais au chargement de Bootstrap avant jQuery.
Ajoute ça:
$(document).ready(function(){
$(document).on('shown.bs.modal','.modal', function () {
// DO EVENTS
});
});
Parfois, cela ne fonctionne pas si:
1) vous avez une erreur dans le code de script Java avant votre ligne avec $('#myModal').on('show.bs.modal'...)
. Pour résoudre ce problème, placez un message d’alerte avant la ligne pour savoir s’il apparaît lorsque vous chargez la page. Pour résoudre éliminer les JS ci-dessus pour voir quel est le problème
2) Un autre problème est que vous chargez le JS dans le mauvais ordre. Par exemple, vous pouvez avoir la partie $('#myModal').on('show.bs.modal'...)
avant de charger JQuery.js. Dans ce cas, votre appel sera ignoré. Vérifiez donc tout d'abord si le lien de script vers JQuery est au-dessus de votre appel modal onShow
dans HTML (sinon, il sera ignoré. Pour résoudre ce problème, placez une alerte à l’intérieur du spectacle. Si vous voyez celui qui précède et non celui qui se trouve dans la fonction onShow, il est clair que la fonction ne peut pas être exécutée. Si l'orthographe est correcte, votre appel à JQuery.js n'est pas effectué ou il est passé après la partie onShow
Dans mon cas, le problème était comment travelsize comment .. L'ordre des importations entre bootstrap.js et jquery. Parce que j'utilise le modèle Metronic et ne vérifie pas avant
Voici les détails granulaires:
show.bs.modal fonctionne pendant le chargement du dialogue de modèle. post rendu
Assurez-vous que vous utilisez vraiment le modal bootstrap jquery et pas un autre modal jquery.
Beaucoup trop de temps perdu sur ce ...