1

onclick イベントでポップアップするモーダルがあります。基本的には、ページ上にグレー表示されたレイヤーを追加してから、モーダル div をグレーの上に z-index 1 つ上に追加します。私が直面している問題は、本文を下にスクロールできる小さな画面サイズの場合です。

ボディを切り替えてみました {overflow:hidden}

これは、モーダルに最初のビューを超える表示する必要があるコンテンツがある場合を除いて機能します。理想的には、小さい画面でモーダルのみを表示し、必要に応じて下にスクロールできるようにします。ありがとう。

4

2 に答える 2

1

これが私の試みです。

HTML

<div class = "popup">
    <div class = "over"></div>
    <div class = "window">
        <button class = "close">Close</button>
        <p>Filler</p>
        <p>Filler</p>
        <p>Filler</p>
        <button class = "close">Close</button>
    </div>
</div>

<div class = "content">
    <p>Filler</p>
    <button class = "pop">Popup</button>
    <p>Filler</p>
    <p>Filler</p>
    <button class = "pop">Popup</button>
    <p>Filler</p>
</div>

CSS

body {
    margin:0;
}

p {
    margin:0;
    height:200px;
    background-color:yellow;
}

.popup {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:1;
}

.over {
    width:100%;
    height:100%;
    background-color:gray;
    opacity:0.5;
    position:absolute;
    z-index:-1;
}

.window {
    border:1px solid black;
    width:50%;
    height:100%;
    overflow:auto;
    margin:0 auto;
    background-color:orange;
}

.content.paused {
    position:fixed!important;
    width:100%;
    height:1000%;
    overflow:hidden;
    z-index:0;
}

Jクエリ

var scroll;

$('.pop').click (function () {
    scroll = $(document).scrollTop ();
    $('.popup').show ();
    $('.content').offset ({top:-scroll}).addClass ('paused');
});

$('.close').click (function () {
    $('.popup').hide ();
    $('.content').removeClass ('paused').removeAttr ('style');
    $(document).scrollTop (scroll);
});

これには、ページ コンテンツがポップアップとは別の div 内にある必要があります。ボタンをクリックすると、現在のスクロール位置が保存され、ページのコンテンツが固定され、スクロールと同じ量だけページの上部に移動します。したがって、100 ピクセル下にスクロールすると、コンテンツの視覚的な位置を維持するために、コンテンツの上部が画面の上部より 100 ピクセル上になります。高さを非常に大きく設定したため、コンテンツはスクロールできなくなります。

ポップアップは、必要に応じて最大の高さとスクロールバーを備えた通常の div になります。

ポップアップを閉じると、ページのコンテンツが元の状態に復元され、固定位置が削除され、上部の移動が削除され、ページのスクロール位置が以前の状態に戻されます。

于 2013-11-01T18:44:40.770 に答える
0

これらの属性をモーダル コンテナ div に追加してみてください。

.modalContainer{ 
    max-width: 500px;  //maximum width of the size of the modal
    position: relative;
    width: 85%;  //can be how much of the screen you want it to take up
}
于 2013-11-01T18:05:56.890 に答える