0

Olá, estou criando um site onde uma das páginas possui uma lista com vários itens clicáveis (como uma ‘vitrine’ de lojas online), ao serem clicados abrirá um modal que ficará na frente de todo conteúdo. Porém se a página possuir scroll, mesmo com o modal aberto, ainda é possível interagir com o fundo, e o modal só fica ocupando metade da altura, o ideal seria que ao abri o modal o fundo não rolasse, e ao fechar o modal, a rolagem da página voltasse a ser ativada.

Ou seja, preciso que ao clicar no botão do modal, a rolagem seja desativada e ao fechar o modal, a rolagem seja ativada.

Vi alguns exemplos com html puro, mas que não se aplicaram no ReactJS. Alguém pode me ajudar?

Exemplificando: inserir a descrição da imagem aqui

3
  • 1
    Ao abrir o modal mude a propriedade CSS position do body para fixed Commented 24/09/2020 às 2:08
  • Entendi, se possível você poderia me dar um exemplo de como fazer isso no ReactJS?
    – Luh
    Commented 24/09/2020 às 10:25
  • Funcionou! o que estava faltando no meu caso era instalar o Jquery. Obrigada.
    – Luh
    Commented 24/09/2020 às 13:32

2 Respostas 2

1

Não é necessário o Jquery, voce pode fazer assim:

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

Daí voce coloca a variável class na propriedade class do JSX, por exemplo:

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

Com ajuda do colega @RafaelCosta consegui chegar nessa resposta:

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

Nesse caso fiz um if ternario com o estado que armazena a informação da abertura do modal.

Observação: instalei o Jquery para usar o '$'.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .