0

Can I add class to "modal-open" when window height is greater than body height?

When the page is lengthy then "modal-open" gets "padding-right" to the body

<body class="modal-open" style="padding-right: 17px;">

and when page is shorter than window then "modal-open" dosent get "padding-right".

<body class="modal-open">

Thanks in advance.

Muhammad Usman
  • 1,220
  • 13
  • 22
Adam Pavlov
  • 307
  • 4
  • 17

1 Answers1

0

You could try something like:

$(window).on('resize', function(){
  let win = $(this); //this = window
  let modal_selector = $('.modal-open');
  if (win.height() > $('body').height()) { 
    modal_selector.css('padding-right', '17px');
  } else {
    modal_selector.css('padding-right', 'inherit');
  }
});

Though you might notice that the event fires DURING the resize, not just when it finishes, so you might want to follow the below answer to only do the styling on resize event end.

JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

SubXaero
  • 367
  • 3
  • 8