Question

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

我试过切换 body {overflow：hidden}

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

Answer 1

这是我的attempt。

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

JQUERY

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
}

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

2 个答案: