Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Modal fica muito grande e fixo

Referente ao curso React: estilize componentes com Styled Components e manipule arquivos estáticos, no capítulo Uma modal de zoom e atividade Desafio: barra de populares e modal estilizada

por jander stival de carvalho
| 36.9k xp | 11 posts
Gerente de T.I

Bom dia, estou com uma questão, quando abro o Modal, ele ocupa a tela e nao se move para poder ver todo o conteudo dentro dele, ficando fixo:

Utilizei a colinha mas nao consegui organizar certo , segue codigo: 

import styled from "styled-components";
import Imagem from "../Galeria/Imagem";``
import BotaoIcone from "../BotaoIcone";

const Overlay = styled.div`
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
`;

const DialogEstilizado = styled.dialog`
    position: relative;
    top: 294px;
    background: transparent;
    padding: 0;
    border: 0;
    width: 1156px;
    display: flex;
    justify-content: center;
    form {
        button {
            position: relative;
            top: 20px;
            right: 60px;
        }
    }
`

const ModalDeZoom = ({ foto, aoFechar }) => {
  return (
    <>
      {foto && (
        <Overlay>
          <DialogEstilizado open={!!foto} onClose={aoFechar}>
            <Imagem foto={foto} expandida={true} />
            <form method="dialog">
                        <BotaoIcone formMethod="dialog">
                            <img src="/icones/fechar.png" alt="Icone de fechar" />
                        </BotaoIcone>
                    </form>
          </DialogEstilizado>
        </Overlay>
      )}
    </>
  );
};

export default ModalDeZoom;

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá, Jander! Como vai?

Pelo que entendi, você está enfrentando um problema com o modal que está ocupando toda a tela e não permite que você navegue pelo conteúdo dentro dele, certo?

Parece que o problema está relacionado com a forma como você estilizou o modal. No seu código, você definiu a posição do DialogEstilizado como relative e definiu o top como 294px. Isso significa que o modal será posicionado em relação ao seu local original no documento e será movido para baixo por 294px.

Além disso, você definiu a largura (width) do DialogEstilizado como 1156px, o que pode ser muito grande dependendo da resolução da tela do usuário.

Aqui estão algumas sugestões para corrigir o problema:

  1. Em vez de usar position: relative;, você pode querer usar position: absolute;. Isso fará com que o modal seja posicionado em relação ao elemento pai mais próximo (ou o elemento raiz do documento) que tem uma posição diferente de static. Isso permitirá que você posicione o modal no centro da tela, independentemente da posição de rolagem do usuário.

  2. Em vez de definir a largura como um valor fixo (1156px), você pode querer usar uma porcentagem (width: 80%;) ou uma combinação de width: 100%; e max-width: 600px; (ou qualquer valor que você achar adequado). Isso fará com que o modal seja responsivo e se ajuste à largura da tela do usuário.

Aqui está um exemplo de como você pode modificar o DialogEstilizado:

const DialogEstilizado = styled.dialog`
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    padding: 0;
    border: 0;
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    form {
        button {
            position: relative;
            top: 20px;
            right: 60px;
        }
    }
`

Espero que isso ajude a resolver o problema! Lembre-se, essas são apenas sugestões e você pode precisar ajustá-las de acordo com suas necessidades específicas.

Espero ter ajudado e bons estudos!