Javascript Girl
  1. Javascript Girl
  3. JQuery se déplace vers le haut de Bootstrap Modal
Intereting Posts
Linkedin Uncaught Error: vous devez spécifier un domaine API JavaScript valide dans le cadre de la configuration de cette clé 'This' étant scoped à l'objet de fenêtre lors de la création de l'objet JS où la fonction est stockée dans un hash Javascript expression régulière pour vérifier les adresses IP Comment savoir si le texte sélectionné se trouve dans une division spécifique Obtenir un 404 lorsque vous essayez de télécharger un fichier sur le disque goi de google, en soupçonnant un problème de formatage de données Comment faire pour masquer le texte qui chevauche les étiquettes dans D3 Zoomable Pack Layout? Facebook comme bouton pour un statut Facebook JS Google Maps API v3 Animate Marker entre les coordonnées Téléchargement de fichier AJAX avec XMLHttpRequest Quelle est la maturité de HTML + CSS maintenant en relation avec la génération de rapports pour l'impression? Existe-t-il un moyen d'utiliser les correspondants par défaut de Jasmine dans les matchers personnalisés? Charge jQuery dans un js, puis exécute un script qui en dépend Actualiser Captcha simple TinyMCE – limite RemoveFormat à une liste de formats Obtenez les dimensions de la fenêtre de navigation avec JavaScript

JQuery se déplace vers le haut de Bootstrap Modal

Je suis en train d'utiliser le plugin modal bootstrap pour afficher de longs messages juridiques sur un site Web que je concevais, mais le problème est que, si vous ouvrez un mode après l'autre, le second sera déployé à n'importe quelle position, le premier étant . Je cherche donc un moyen de faire défiler un div vers le haut avec JS / JQuery. C'est le code que j'utilise actuellement:

HTML: 

<!--MODAL--> <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="modalTitle"></h3> </div> <div id="modal-content" class="modal-body"> </div> <div class="modal-footer"> <button id="modalPrint" class="btn btn-info hidden-phone" onClick=''>Print</button> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> </div> </div>

Javascript: 

 function openModal(heading, url) { $.ajax({ url: url, cache: false }).done(function( html ) { $("#modal-content").html(html); $("#modalTitle").html(heading); $('#modalPrint').attr('onClick', 'loadPrintDocument(printCookies, {attr : "href", url : '+ url +', showMessage: false, message: "Please wait while we create your document"})'); $('#modal').modal('show'); $("#modal-content").scrollTop(0); }); }

Comme vous pouvez le voir, j'ai essayé de faire défiler le haut de la page après le mode modal. Des idées?

Maintenant, avec bootstrap 3, les événements ont un changement et peuvent être obtenus comme ceci (plus une animation en douceur vers le haut) 

 $('#modal').on('shown.bs.modal', function () { $('#modal').animate({ scrollTop: 0 }, 'slow'); });

D'accord, j'ai répondu à ma propre question. Pour toute autre personne avec ce problème, ajoutez simplement cette fonction à votre JS! 

 $('#modal').on('shown', function () { $("#modal-content").scrollTop(0); });

Je laisserai cette question, car il n'y en a pas un semblable (que je pourrais trouver) et cela peut aider quelqu'un

  1. Le bouton défiler vers le haut a une classe de: .page-scroll

Entrez la description de l'image ici

  1. Modal avec une classe de: .modal

  2. JS pour faire apparaître le scroll avec le modal (JS pourrait être simplifié): 

     $('body').on('click', '.page-scroll', function(event) { var $anchor = $(this); $('html, body, .modal').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); event.preventDefault(); });

Il y a eu une modification dans boostrap où vous devez utiliser: on shown.bs.modal

Appelez une fonction lorsque vous affichez la fenêtre modal (j'ai opté pour cette méthode) 

 <button onclick="showSMSSummary(); return false;" data-toggle="tooltip" title="Click To View Summary" class="btn btn-primary btn-sm">SMS Summary</button> function showSMSSummary() { $('#HelpScreenModalContent').modal('show'); $('#HelpScreenModal').animate({ scrollTop: 0 }, 'fast'); }

Sur Bootstrap 4 (v4.0.0-alpha.6), ce qui suit m'a bien fonctionné: 

 $('#Modal').show().scrollTop(0);

ScrollTop bootbox modal sur fadeIn La réponse est dans ce problème.

Lors de la configuration de la boîte de dialogue bootbox, ajoutez .off("shown.bs.modal"); Ceci à la fin.

bootbox.dialog({ ... }).off("shown.bs.modal");

Il se déroulera en haut lorsque vous ouvrez la boîte de dialogue.