1

私は明らかにモーダルを使用しています。ウィンドウのサイズによっては、コンテンツが大きすぎて画面に収まらない場合があります。

何をしても、スクロールしてすべてのコンテンツを表示することはできません。モーダル自体をoverflow-y:auto;にしてみましたが、これは役に立ちませんでした。

以下のスクリーンショットは、モバイル デバイスのサイズに設定された chrome ウィンドウのものです。フォームの下部に、見えないために押せないボタンがあります。

ウィンドウもモーダル コンテンツもスクロールしません。また、モーダルの上部が低すぎるようですが、下部のボタンのアクセシビリティでは何も変わらないようです。

ここに画像の説明を入力

4

3 に答える 3

1

Reveal-modalのしきい値の高さoverflow-yを指定する必要があります。その後、が考慮され、スクロール バーが表示されます。

.reveal-modal
{
  max-height:initial; //reset any max-height set by foundation defaults
  height:600px; //replace value with your desired height
  overflow-y:scroll;
}
于 2016-07-26T08:46:42.350 に答える
0

クラス「full」を「reveal-modal」に追加すると、高さが 100% スクロール可能に設定されます。

<div id="myModal" class="reveal-modal full" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

このモードでは、背景のオーバーレイ (影と境界線) に問題があることに気付いたので、次の CSS を追加して背景のオーバーレイを削除しました。

<style>
.reveal-modal {
    border:0 none;
    box-shadow:none;
}
.reveal-modal-bg {
    background-color: transparent;
}
</style>

これが私のサンプルページです

于 2016-08-16T03:46:04.647 に答える