1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

  2. Anuncie Aqui ! Entre em contato fdantas@4each.com.br

[ReactJS]

Discussão em 'Mobile' iniciado por Stack, Janeiro 27, 2021.

  1. Stack

    Stack Membro Participativo

    Bom dia pessoal! Estou com dificuldades em entender a lógica e dinâmica para fazer o modal do material-ui aparecer assim que a página é carregada, no momento eu não mexi no código pois estou tentando entender toda a estrutura dele, mas se alguém conseguir me der uma luz, eu agradeceria

    import { makeStyles } from '@material-ui/core/styles';
    import Modal from '@material-ui/core/Modal';

    function rand() {
    return Math.round(Math.random() * 20) - 10;
    }

    function getModalStyle() {
    const top = 50 + rand();
    const left = 50 + rand();

    return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
    };
    }

    const useStyles = makeStyles((theme) => ({
    paper: {
    position: 'absolute',
    width: 400,
    backgroundColor: theme.palette.background.paper,
    border: '2px solid #000',
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
    },
    }));

    export default function Aviso() {
    const classes = useStyles();
    // getModalStyle is not a pure function, we roll the style only on the first render
    const [modalStyle] = React.useState(getModalStyle);
    const [open, setOpen] = React.useState(false);

    const handleOpen = () => {
    setOpen(true);
    };

    const handleClose = () => {
    setOpen(false);
    };

    const body = (
    <div style={modalStyle} className={classes.paper}>
    <h2 id="simple-modal-title">Text in a modal</h2>
    <p id="simple-modal-description">
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
    </p>
    <Aviso />
    </div>
    );

    return (
    <div>
    <button type="button" onClick={handleOpen}>
    Open Modal
    </button>
    <Modal
    open={open}
    onClose={handleClose}
    aria-labelledby="simple-modal-title"
    aria-describedby="simple-modal-description"
    >
    {body}
    </Modal>
    </div>
    );
    }

    Continue reading...

Compartilhe esta Página