javascript - 如何使用相同的按钮/div 在没有主体滚动的情况下切换覆盖

Question

我一直在尝试让我的移动菜单在打开时防止其后面的主体滚动。

用户 sboisse有一个 jsfiddle 在对 this question 的回答中完美地展示了这一点.

jsfiddle

我的问题是:由于我希望我的汉堡打开和关闭 noscroll 和覆盖，我如何解决使用两个不同类的事实，我需要在同一个汉堡的 div 上使用它们？

HTML

<div class="mainpage">
<a href='javascript: void(0)' class="show-popup">Show popup</a>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
<div>k</div>
<div>l</div>
<div>m</div>
<div>n</div>
<div>o</div>
<div>p</div>
<div>q</div>
<div>r</div>
<div>s</div>
<div>t</div>
<div>u</div>
<div>v</div>
<div>w</div>
<div>x</div>
<div>y</div>
<div>z</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
<div>k</div>
<div>l</div>
<div>m</div>
<div>n</div>
<div>o</div>
<div>p</div>
<div>q</div>
<div>r</div>
<div>s</div>
<div>t</div>
<div>u</div>
<div>v</div>
<div>w</div>
<div>x</div>
<div>y</div>
<div>z</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
<div>k</div>
<div>l</div>
<div>m</div>
<div>n</div>
<div>o</div>
<div>p</div>
<div>q</div>
<div>r</div>
<div>s</div>
<div>t</div>
<div>u</div>
<div>v</div>
<div>w</div>
<div>x</div>
<div>y</div>
<div>z</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
<div>k</div>
<div>l</div>
<div>m</div>
<div>n</div>
<div>o</div>
<div>p</div>
<div>q</div>
<div>r</div>
<div>s</div>
<div>t</div>
<div>u</div>
<div>v</div>
<div>w</div>
<div>x</div>
<div>y</div>
<div>z</div>
</div>
<div class="overlay hide">
<div class="popup">
This is my popup.
<a href="javascript: void(0)" class="hide-popup">Hide popup</a>
<div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
    <div>g</div>
    <div>h</div>
    <div>i</div>
    <div>j</div>
    <div>k</div>
    <div>l</div>
    <div>m</div>
    <div>n</div>
    <div>o</div>
    <div>p</div>
    <div>q</div>
    <div>r</div>
    <div>s</div>
    <div>t</div>
    <div>u</div>
    <div>v</div>
    <div>w</div>
    <div>x</div>
    <div>y</div>
    <div>z</div>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
    <div>g</div>
    <div>h</div>
    <div>i</div>
    <div>j</div>
    <div>k</div>
    <div>l</div>
    <div>m</div>
    <div>n</div>
    <div>o</div>
    <div>p</div>
    <div>q</div>
    <div>r</div>
    <div>s</div>
    <div>t</div>
    <div>u</div>
    <div>v</div>
    <div>w</div>
    <div>x</div>
    <div>y</div>
    <div>z</div>
</div>

CSS

.no-scroll
{
overflow: hidden;
}

.overlay
{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
background-color: rgba(255, 0, 0, 0.2);    
}

.popup
{
position: relative;
width: 50%;
margin: 100px auto;
background-color: green;
}

.hide
{
display: none;
}

JavaScript

$(".show-popup").click(
function () {
    $(".overlay").removeClass("hide");
    $(document.body).addClass("no-scroll");
});

$(".hide-popup").click(
function () {
$(".overlay").addClass("hide");
$(document.body).removeClass("no-scroll");
});

Answer 1

一种解决方案是不要让叠加层占据前面的整个页面。您可以通过单击、将正文背景颜色设置为所需的边框颜色、从弹出窗口中删除边框并将边框尺寸替换为边距尺寸来实现此目的。