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.

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");
});

score 1 · Accepted Answer · answered Dec 11 '16 at 20:30

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.

answered Dec 11 '16 at 20:30

Eric Wiener

4,929
4
31
40

OK. Thanks for answering. I am trying to get my head around this. You mean don't have the overlay at all, but change the body's background colour instead. At the same time, use the margin dimensions to position the popup? In my actual real page the popup is a full width menu, so in reality I would only need to do the no-scroll bits to the body and then set the body background colour. I will try this. Thank you. The problem still remains though... using the same button / div as the trigger. I guess I can use toggle rather than onclick? – m-d-a Dec 11 '16 at 20:52
Brilliant. Thank you. I'll let you know when I've got it working. – m-d-a Dec 11 '16 at 21:05
Not tried the following solution yet, but think I'm gonna go with: $(document).ready(function(){ $("ID_OF_BURGER").click(function(){ $("document.body #nav").toggleClass("scroll noscroll"); $("#overlay").toggleClass("visible novisible"); }); }); – m-d-a Dec 13 '16 at 22:53

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

1 Answers1