61

私は現在、ブートストラップ モーダル プラグインを使用して、設計中の Web サイトに長い法的メッセージを表示していますが、問題は、1 つのモーダルを次々に開くと、2 つ目のモーダルが最初のモーダルの位置にスクロールされてしまうことです。 . そこで、JS/JQuery を使用して div を一番上にスクロールする方法を探しています。これは私が現在使用しているコードです:

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);
    });
}

ご覧のとおり、モーダルが表示された後、一番上までスクロールしてみました。何か案は？

4

7 に答える 7

74

ブートストラップ 3 では、イベントが変更され、このように実現できます (さらに、上部へのスムーズなアニメーション)

$('#modal').on('shown.bs.modal', function () {
    $('#modal').animate({ scrollTop: 0 }, 'slow');
});
于 2013-08-28T20:36:43.293 に答える