同じボタン/ divを使用してボディスクロールなしでオーバーレイを切り替える方法

Question

開いているときに、自分のモバイルメニューをスクロールさせないようにしています。

ユーザーsboisseには、this questionの回答でこれを完全に示すjsfiddleがあります。

jsfiddle

私の質問は：私は私のバーガーは、オンとオフnoscrollとオーバーレイを切り替えたいように、私は2つの異なるクラスが使用されているという事実を回避んどのように、私は同じバーガーのに必要と思われます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

解決策の1つは、オーバーレイが前面のページ全体を占めないようにすることです。これを実現するには、onclick、ボディの背景色を目的のボーダーカラーに設定し、ポップアップからボーダーを削除し、ボーダーのディメンションを余白ディメンションに置き換えます。