如何使用相同的按鈕/ div切換沒有主體滾動的覆蓋

Question

我一直在嘗試打開移動菜單，以防止其后面的主體滾動。

用戶sboisse有一個jsfiddle，可以很好地顯示此問題的答案。

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

一種解決方案是不讓覆蓋層占據整個頁面的前面。 您可以通過onclick來實現，將主體背景色設置為所需的邊框顏色，從彈出窗口中刪除邊框，然后將邊框尺寸替換為邊距尺寸。