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

Question

>我有一个在点击事件上弹出的模态。基本上，它在页面上添加一个灰色的图层，然后在灰色上方添加一个模态div 一个 z 索引。我遇到的问题是对于较小的屏幕尺寸，您可以向下滚动正文。

我试过切换正文 { 溢出：隐藏 }

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

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
}