web-dev-qa-db-fra.com

JQuery défiler vers le haut de Bootstrap Modal

J'utilise actuellement le plugin modal bootstrap) pour afficher de longs messages juridiques sur un site Web que je suis en train de concevoir, mais le problème est que si vous ouvrez un modal après l'autre, le second le sera déjà. Je cherche un moyen de faire défiler une division 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 constater, j'ai essayé de faire défiler l'écran vers le haut une fois le modal affiché. Des idées?

javascriptjquerytwitter-bootstrap
46
Adi Bradfield

D'accord, j'ai répondu à ma propre question. Pour ceux qui ont ce problème, ajoutez simplement cette fonction à votre JS!

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

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

43
Adi Bradfield

Maintenant, avec bootstrap 3, les événements ont changé et peuvent être réalisés comme ceci (plus une animation fluide vers le haut)

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

Sur Bootstrap 4 (v4.0.0-alpha.6), les opérations suivantes ont bien fonctionné pour moi:

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

S'il vous plaît noter à partir de bootstrap-4.0.0-beta.1 et Firefox 56.0.1 cela ne semble pas fonctionner correctement;

J'ai vérifié IE11, MS Edge et Chrome et cela fonctionne bien.

7
BernardV
  1. Le bouton de défilement vers le haut a une classe de: . Page-scroll

enter image description here

  1. Modal avec une classe de: . Modal

  2. JS pour faire défiler 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();
});
3
user1040259

Il y avait un changement dans le bootstrap où vous devez utiliser: on shown.bs.modal

Appelez une fonction lorsque vous affichez la fenêtre modale (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');
}
2
Patrick

modal ScrollTop bootbox sur fadeIn La réponse est dans ce numéro.

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

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

Il défilera en haut lors de l'ouverture du dialogue.

0
Stephanie