97

アプリにモーダルダイアログがあり、y方向にかなり長くなる可能性があります。これにより、ダイアログのコンテンツの一部がページの下部に隠れてしまうという問題が発生します。

ここに画像の説明を入力してください

ウィンドウのスクロールバーが表示されたときにダイアログをスクロールし、長すぎて画面に収まらないようにしたいのですが、本体はモーダルの後ろに置いたままにしておきます。Trelloを使用している場合は、私が何をしようとしているのかがわかります。

これは、JavaScriptを使用してスクロールバーを制御しなくても可能ですか？

これまでにモーダルとダイアログに適用したCSSは次のとおりです。

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}
4

11 に答える 11

234

試す：

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

モーダルを配置し、垂直スクロールします

于 2016-01-20T10:47:16.590 に答える
46

これは私のためにそれを修正したものです：

max-height: 100%;
overflow-y: auto;

編集: 現在 Twitter で使用されているのと同じ方法を使用します。モーダルは現在のコンテンツの上にある別のページのように機能し、モーダルの背後にあるコンテンツはスクロールしても移動しません。

本質的にはこれです：

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

モーダルでこの CSS を使用すると、次のようになります。

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
ピュア JS バージョン (IE9+): https://jsfiddle.net/0x0049/koodkcng/1/

これは、ページまたはモーダル ダイアログの高さや幅に関係なく機能し、マウス/指がどこにあるかに関係なくスクロールでき、一部のソリューションではメイン コンテンツのスクロールを無効にする不快なジャンプがなく、見た目も優れています。

于 2013-12-05T07:05:13.737 に答える
15

変化するposition

position:fixed;
overflow: hidden;

に

position:absolute;
overflow:scroll;
于 2012-05-07T04:33:49.650 に答える
6

これは、コンテンツに合わせて自動サイズ変更し、ウィンドウに収まらない場合にスクロールを開始するモーダル ウィンドウのデモです。

モーダル ウィンドウのデモ(HTML ソース コードのコメントを参照)

すべて HTML と CSS のみで行われます- モーダル ウィンドウの表示とサイズ変更に JS は必要ありません(ただし、もちろんウィンドウを表示するためにはまだ必要です- 新しいバージョンでは JS はまったく必要ありません)。

更新 (その他のデモ):

ポイントは、外側の DIV が固定位置を定義し、内側の DIV がスクロールを作成する、外側と内側の DIV を持つことです。(デモでは、実際のモーダル ウィンドウのように見せるために、実際にはさらに多くの DIV があります。)

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }
于 2014-04-16T14:23:54.687 に答える
2

位置を固定するだけでこの問題は解決するはずですが、この問題を回避するためのもう 1 つの適切な回避策は、モーダル div または要素をサイト レイアウト内ではなくページの下部に配置することです。ほとんどのモーダル プラグインは、ユーザーがメイン ページをスクロールし続けることができるように、モーダル ポジショニングを絶対的なものにします。

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>
于 2013-11-17T17:22:52.070 に答える
1

position:fixedこれは、モーダル ウィンドウが視点に対して固定されたままになることを意味します。このシナリオでは適切であるというあなたの評価に同意します。それを念頭に置いて、なぜモーダル ウィンドウ自体にスクロールバーを追加しないのですか?

もしそうなら、正しいmax-heightとoverflowプロパティはうまくいくはずです。

于 2012-05-07T05:03:54.580 に答える
0

最終的には、モーダル画面の背後にあるページのコンテンツを変更して、ページをスクロールするのに十分な長さにならないようにする必要がありました。

position: absoluteこれを行うと、ユーザーがページを下にスクロールできなくなったため、ダイアログに適用するときに発生した問題が解決されました。

于 2012-05-23T14:05:44.283 に答える
0

モーダルが開いているときにクリック可能なウィンドウページスクロールバー

これは私のために働きます。純粋な CSS。

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

それを試して、私に知らせてください

于 2015-09-26T00:21:27.703 に答える