javascript - 使用媒体查询在较小的屏幕上仅滚动模式的距离

Question

我有一个在 onclick 事件上弹出的模式。基本上它在页面上添加了一个灰色层，然后在灰色上添加了一个 z-index 高的模态 div。我遇到的问题是对于较小的屏幕尺寸，您可以向下滚动正文。

我试过切换 body { overflow:hidden }

这有效，除非模态有更多需要查看的内容超出初始视图。理想情况下，您只能在较小的屏幕上看到模式，并在需要时向下滚动。谢谢。

Answer 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;
}

查询

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 内。当您单击该按钮时，当前滚动位置被保存，然后页面内容被固定定位并在页面顶部上方移动与滚动相同的量。因此，如果您向下滚动 100px，则内容的顶部将高于屏幕顶部 100px，以保留内容的视觉位置。内容将不再可滚动，因为我将高度设置得非常大。

弹出窗口将只是任何常规 div，如果需要，具有最大高度和滚动条。

当你关闭弹窗时，页面内容恢复到原来的状态，固定位置被移除，顶部位移被移除，页面的滚动位置被设置回原来的样子。

Answer 2

尝试将这些属性添加到您的模态容器 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
}