ブートストラップ3モーダルポップアップは、上にフォーカスしてスクロールを防止します。

Question

私は、自分の画面よりも長いブートストラップモーダルをいくつか持っています。これは、ブートストラップが自動的にモーダルの底に集中することを意味します。

モーダルを表示した後、下のようにモデルの上部を表示するために、以下のように.modal-headerに焦点を当てました。これでトップへの自動スクロールが可能になりましたが、私はこれをスコーリングなしでどうやって行うことができますか？

$('.modal-header').focus(); 

Answer 1

あなたがフォーカスすることなく、そこにいくつかのCSS、スクリプトを使用することができます。

.modal .modal-body { 
    max-height: 90vh; // the height you want (vh means viewport height) 
    overflow-y: auto; // this will allow the middle area to scroll. 
} 

そして、あなたはまだフォーカスをしたい場合、あなたは位置を保存して、焦点を当てた後の位置を復元するには、このスニペットを使用することができます。

var x = window.scrollX || window.pageXOffset || document.documentElement.scrollTop, 
    y = window.scrollY || window.pageYOffset || document.documentElement.scrollLeft; 
$('.modal-header').focus(); 
window.scrollTo(x, y);