8

モーダル ポップアップがあり、ブラウザーの高さよりも高いコンテンツを読み込むと、下にスクロールして残りの情報を表示することができません。代わりに、背景はスクロールできますが、ポップアップはできません。

代わりに、ポップアップをそのままにして、ユーザーが上下にスクロールしたときにポップアップをそのままにして、コンテンツの一番下までスクロールできるようにしたいと思います。Facebook で非常に長い投稿を作成すると、ポップアップが正しく機能します。このコントロールを使用して同じ効果を得る方法を知りたいです。

4

6 に答える 6

5

モーダル ポップアップの css で、モーダル ポップアップの幅を設定してから、overflow:auto. これにより、水平スクロールバーが表示されます。例：

.ModalPopupPanel
{
  width:900px;
  overflow:auto;
}

そのため、コンテンツの幅が 900px を超えると、水平スクロールバーが表示されます。モーダルポップの高さを設定する必要がある垂直スクロールバーにも同じことが当てはまります。

于 2010-02-05T03:20:02.540 に答える
3

ポップアップが開いているときに body タグにクラスを追加してスクロールバーを非表示にし、ポップアップが消えるときにクラスを削除すると、背景は position:fixed になり、高さは window.height() になります (取得します)。 JS で動的に)、overflow:auto にもなります。

ポップアップが背景よりも高い場合は、右側に素敵なスクロール バーが表示されますが、ボディ スクロール バーが非表示になっているため、そのスクロール バーしか表示されません。また、ページ自体はスクロールしません。これは、Facebook が画像ビューアーで行っている方法です。

于 2011-12-05T19:00:43.600 に答える
2

このスクリプトは、ポップアップの高さを画面の高さの90％に設定してから、overflow：auto;を設定できます。

<script type="text/javascript">
  function pageLoad() {
      $get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
  }
    </script>

ここに私が尋ねる関連する質問と私が見つけた解決策があります。

asp.net ModalPopupExtender：オーバーフロー時にスクロールバーを表示する必要があります

于 2010-05-09T16:20:08.963 に答える
0

コンテンツを含む modalpopup をスクロールするためにこれを試すことができます: 空のパネルを指す PopupDragHandleControlID を設定し、Reposition mode = "None" を設定すると、モーダルはページをスクロールするのと同じ位置に固定されます。

于 2012-11-08T11:15:56.890 に答える
0

overflow: autoコンテナ ブロックにスタイルを適用します。

于 2009-12-12T18:49:54.770 に答える
-1

Here the simple and best working solution

Add that class to your modal popup page.

body.modal-open {
overflow: auto;
}

于 2015-12-20T13:12:20.027 に答える