How to toggle overlay with no body scroll using the same button / div

Question

I have been trying to get my mobile menu, when open, to prevent the body behind it scrolling.

User sboisse has a jsfiddle which shows this perfectly in an answer to this question .

jsfiddle

My question is: As I want my burger to toggle the noscroll and overlay on and off, how do I get around the fact that two different classes are used, which I would need on the same burger's 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

One solution is to not have the overlay take up the entire page in the front. You could achieve this by onclick, setting the body background color to be the desired border color, removing the border from the pop up, and replacing the border dimensions with margin dimensions.