滚动条未在模式隐藏下恢复

Question

I have a modal and is opened by clicking on button. When this modal is opened then i am getting 2 scroll bars,

1. first for Modal
2. second for html/body

I tried removing scrollbar as below:

if ($(".dialog-popup-open").length > 0) {
    $('html').css('overflow','hidden');
}
$(".closeButton").off("click").on("click", function () {
     $('html').css('overflow','scroll');
     //$('html').css('overflow','inherit');
}

Scroll bar is hiding perfectly but not restoring when modal is closed. Any ideas please?

i tried both scroll and inherit

Answer 1

Can you please try this one:

 $("#openModal").click(function(){ //code to open the overlay //.... //.... //add modalActive class to html tag $("html").addClass("modalActive"); }); $(".closeButton").off("click").on("click", function () { //code to close the modal overlay //... //... //remove modalActive class from html $('html').removeClass("modalActive"); }); 

 .modalActive{ overflow: hidden; } 

Answer 2

你需要把它给body ：

$('body').css('overflow','auto');