react-modal icon indicating copy to clipboard operation
react-modal copied to clipboard

Published 20 hours ago • verified publisher icon reactjs

How to enable background page scrolling when modal is open

Open nahidbinazad opened this issue 7 years ago • 4 comments

Summary:

Steps to reproduce:

1.Please help me out to enable scrolling background when the modal is open 2. when user load a page he can see the modal but i want that he can scroll the background whole page when the modal popup is open no need to minimize modal. 3.Thanks in advance

nahidbinazad avatar Oct 17 '18 06:10 nahidbinazad

Hi @nahidbinazad, sorry for the delay.

I believe this is a one CSS property. You can check if the <body /> of your page contains overflow: hidden. If so, you can remove this line and your page will be able to scroll again.

diasbruno avatar Oct 19 '18 23:10 diasbruno

Thanks Diasbruno

nahidbinazad avatar Oct 20 '18 04:10 nahidbinazad

@nahidbinazad Let me know if you have solved this issue. Thank.

diasbruno avatar Oct 27 '18 00:10 diasbruno

Alternatively, just add the following code into the global style.

body {
    &.ReactModal__Body--open  {
      overflow: hidden;
      height: 100vh;
    }
}

kasim444 avatar Jun 09 '20 13:06 kasim444