Prevent screen scrolling when opening modal in Reactjs

Asked

Viewed 113 times

0

Hello, I am creating a site where one of the pages has a list of various clickable items (such as a ? shop window' of online stores), when clicked will open a modal that will be in front of all content. But if the page has scroll, even with the modal open, it is still possible to interact with the background, and the modal is only occupying half the height, the ideal would be that when opening the modal the background did not roll, and when closing the modal, the scrolling of the page would be activated again.

That is, I need that when clicking the modal button, the scrolling is disabled and when closing the modal, the scrolling is enabled.

I saw some examples with pure html, but not applied in Reactjs. Can anyone help me?

Exemplifying: inserir a descrição da imagem aqui

javascript css react modal rolling
  • 1

    When opening the modal change the CSS position property of the body to Fixed

  • I understand, if possible you could give me an example of how to do this in Reactjs?

  • It worked! what was missing in my case was installing Jquery. Thank you.

2 answers

1


No need for Jquery, Voce can do so:

const class = isModalVisible ? "class1" : "class2";

Hence Voce puts the class variable in the class property of JSX, for example:

return(
<tr key={_id} className={class}>
)

0

With the help of my colleague @Rafaelcosta I managed to reach this answer:

  isModalVisible ? $("nome_da_classe_ou_id").css({"position":"fixed"}) : 
  $("nome_da_classe_ou_id").css({"position":"relative"})

In that case I made a if ternario with the state that stores the information of the modal opening.

Note: I installed Jquery to use '$'.

Browser other questions tagged javascript css react modal rolling

You are not signed in. Login or sign up in order to post.