使用媒体查询只滚动较小屏幕上模态的距离 [英] Scrolling only the distance of a modal on smaller screens with media queries

问题描述

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

I have a modal that pops up on an onclick event. Basically it adds a greyed out layer over the page, then adds a modal div one z-index higher over the grey. The problem I am running into is for smaller screen sizes you can scroll down the body.

我试过切换
body {overflow：hidden}

I have tried toggling body { overflow:hidden }

这个工作除了当模态有更多的内容需要被看见超过初始视图。理想情况下，你只能在较小的屏幕上看到模态，如果需要，向下滚动它。谢谢。

this works except for when the modal has more content that needs to be seen that exceeds the initial view. Ideally you would be able to see only the modal on smaller screens and scroll down it if needed. Thanks.

推荐答案

这是我的尝试。

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内。当您单击按钮时，当前滚动位置被保存，然后页面内容被定位固定并且移动到页面顶部之上与滚动相同的量。因此，如果向下滚动100像素，内容的顶部将高于屏幕顶部100像素，以保留内容的视觉位置。

This requires the page content to be inside a div that is separate from the popup. When you click the button, the current scroll position is saved, then the page content is positioned fixed and moved above the top of the page by the same amount as the scroll. So if you scrolled down 100px, the top of the content will be 100px above the top of the screen, to preserve the visual position of the content. The content will no longer be scrollable because I set the height to be insanely large.

弹出框只会是任何常规的div，如果需要的话，会有一个最大高度和滚动条。

The popup will just be any regular div, with a max height and scrollbars if needed.

当您关闭弹出式窗口时，页面内容将恢复到其原始状态，固定位置被删除，顶部位移被删除，页面的滚动位置被设置回它是什么。

When you close the popup, the page content is restored to its original state, the fixed position is removed, top displacement removed, and the page's scroll position is set back to what it was before.

这篇关于使用媒体查询只滚动较小屏幕上模态的距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！