Disable body scroll when opening popup

Hi!

I'm having a hard time hiding my body scroll.

The situation is: I implemented a component to make the popup fullscreen. When it is in fullscreen mode, the Y scroll of the body is showing. I would like only the popup scroll to appear.

If you place (overflow-y: hidden;) on the webscreen, the scroll will always hide. But I want to hide it only when the popup is running (open on the screen). When closing the popup, the page scroll appears again.

Hi Danilo, 

Which component you have used to make pop up full screen ? Have you used LayoutPopUp for Pop Up page ?


Thanks and Regards,

Rahul

Hello Rahul!

Yes, I am using the popup layout.

Hey Danilo,

Two things:

1. Isn't it easier to use a modal popup, such that people cannot access the parent?
2. Have you tried disabling the scrollbar from the popup via window.parent?

Regards,
Lennart

Yes. As it is already an old project. I want to continue working with him, as it is only this modification that I need to make.

When I click on the button I use JQuery to make it Fullscren. Follow the code.

$(document).ready(function(){
    
  $('#"+btnExpand.Id+"').click(function(){
 
    $('.os-internal-Popup', window.parent.document).attr('style', 'top: 0px!important');
    $('.os-internal-Popup', window.parent.document).css('left','0px');
    $('.os-internal-Popup', window.parent.document).css('z-index','5000');
    $('.os-internal-Popup', window.parent.document).width('100%');
    $('.os-internal-Popup', window.parent.document).height('100%');
    
  });


Danilo Vilarinho Barbosa wrote:

Yes. As it is already an old project. I want to continue working with him, as it is only this modification that I need to make.

When I click on the button I use JQuery to make it Fullscren. Follow the code.

$(document).ready(function(){
    
  $('#"+btnExpand.Id+"').click(function(){
 
    $('.os-internal-Popup', window.parent.document).attr('style', 'top: 0px!important');
    $('.os-internal-Popup', window.parent.document).css('left','0px');
    $('.os-internal-Popup', window.parent.document).css('z-index','5000');
    $('.os-internal-Popup', window.parent.document).width('100%');
    $('.os-internal-Popup', window.parent.document).height('100%');
    
  });


That way I can assign new CSS properties to my popup. But I can't attribute it to the body, which would be the father.


Danilo Vilarinho Barbosa wrote:

Danilo Vilarinho Barbosa wrote:

Yes. As it is already an old project. I want to continue working with him, as it is only this modification that I need to make.

When I click on the button I use JQuery to make it Fullscren. Follow the code.

$(document).ready(function(){
    
  $('#"+btnExpand.Id+"').click(function(){
 
    $('.os-internal-Popup', window.parent.document).attr('style', 'top: 0px!important');
    $('.os-internal-Popup', window.parent.document).css('left','0px');
    $('.os-internal-Popup', window.parent.document).css('z-index','5000');
    $('.os-internal-Popup', window.parent.document).width('100%');
    $('.os-internal-Popup', window.parent.document).height('100%');
    
  });


That way I can assign new CSS properties to my popup. But I can't attribute it to the body, which would be the father.


If you put this code snippet inside my onclick, it will hide the Y scroll from my popup. But not my primary webscreen.


$('body').css('overflow-y','hidden');