CODEWITHSUNDEEP
javascriptjqueryhtmlcss
vishnu
vishnu

Reputation: 2948

toggle inline styles with JQuery - display & overflow

Could you please take a look at my code:

$(".button").click(function () {
    $("#overlay").css("display", "block");
    $('body').css('overflow', 'hidden');
});

I need to toggle this style when we clicked again on .button. That should be look like:

$(".button").click(function () {
    $("#overlay").css("display", "none");
    $('body').css('overflow', 'auto');
});

JSfiddle

Upvotes: 2

Views: 168

Answers (3)

vishnu
vishnu

Reputation: 2948

I have using this now:

$('.button').on('click', function (e) {
    $('#overlay').toggle();
    if ($("#overlay").is(':visible')) {
        $("#overlay").css("display", "block");
        $('body').css('overflow-y', 'hidden');
    }
    else {
        $("#overlay").css("display", "none");
        $('body').css('overflow-y', 'auto');
    }
});

Upvotes: 0

Gosi
Gosi

Reputation: 2003

Yes, use JQuery's toggleClass.

Create those 2 classes which I did in my example as .display-show & .body-show

Try this:

$(".button").click(function() {
        $("#overlay").toggleClass('display-show');
        $('body').toggleClass('body-show');
});
body {
  overflow: hidden;
  }

#overlay {
  background-color: red;
  opacity: 0.1;
  width: 100px;
  height: 100px;
  }
  
.display-show {
  display: none;
  }
  
.body-show {
  overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="button">Button</a>
<div id="overlay"></div>

Update 1: (according to your jsfiddle)

$(".button").click(function() {
        $("#overlay").toggleClass('display-show');
        $('body').toggleClass('body-show');
});
body {
  font-family: sans-serif;
  height: 1500px;
  padding: 20px;
  overflow: hidden;
}

.button {
  border: 0;
  background: red;
  color: #fff;
  padding: 10px 30px;
  text-decoration: none;
}

#overlay {

  top: 100px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
}

.display-show {
  display: block !important;
}

.body-show {
  overflow: auto !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="button">Button</a>

<div id="overlay"></div>

Upvotes: 2

hoge1e3
hoge1e3

Reputation: 836

How about this code? (Runnable example : https://codepen.io/hoge1e3/pen/mddbJPV)

var overlayVisible=false;
$(".button").click(function () {
    if (!overlayVisible) {
      $("#overlay").css("display", "block");
      $('body').css('overflow', 'hidden');
      overlayVisible=true;
    } else {
      $("#overlay").css("display", "none");
      $('body').css('overflow', 'auto');
      overlayVisible=false;
    }
});

Upvotes: 1

Related Questions