import styled from 'styled-components'; // backdrop export const Wrapper = styled.div` display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: #000000e1; ` // для отключения скрола когда открыто окно useEffect(() => { document.body.style.overflow = isModalOpen ? "hidden" : "unset" }, [isProposalEditorOpen]); // @ts-ignore const Backdrop = ({children, onClick}) => { return ( <Wrapper onClick={() => onClick()} > {children} </Wrapper> ); }; export default Backdrop; // modal const Modal = () => { return ( <Wrapper onClick={(e) => e.stopPropagation()} > </Wrapper> ); }; export default Modal;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter