render() { return createPortal( this.props.children, document.getElementById('modal-container') ) }
const Modal = ({ children }) => { const elRef = useRef(null); if (!elRef.current) { elRef.current = document.createElement("div"); } useEffect(() => { modalRoot.appendChild(elRef.current); return () => modalRoot.removeChild(elRef.current); }, []); return createPortal(<div>{children}</div>, elRef.current); }
const Portal = ({ children }) => { const mount = document.getElementById("portal-root"); const el = document.createElement("div"); useEffect(() => { mount.appendChild(el); return () => mount.removeChild(el); }, [el, mount]); return createPortal(children, el); }
render() { if (this.leafletElement._contentNode) { return createPortal(this.props.children, this.leafletElement._contentNode) } return null }
const Modal = ({ animation, closeModal, pointerEvents }) => { const [closing, setClosing] = useState(false); const handleCloseModal = () => { setClosing(true); closeModal(); }; return createPortal( <div className={`modal ${closing ? 'exiting' : ''}`} style={{ pointerEvents }} > <animated.div style={animation} className="modal-card"> <button onClick={handleCloseModal}>Close</button> <h1>Modal</h1> </animated.div> </div>, document.querySelector('#modal-portal') ); }
const Modal = props => { return createPortal( <div className="modal"> <div className="mask"/> {props.children} </div>, document.getElementById('body')) }
render() { const { title, submitText, cancelText, children, activeModal, submitDisabled, } = this.props; if (activeModal) { return createPortal( <ModalView content={children} title={title} submitText={submitText} cancelText={cancelText} handleModalSubmit={this.handleSubmit} submitDisabled={submitDisabled} handleModalCancel={this.handleCancel} />, modalRoot, ); } return null; }
const Modal = ({ children }) => { const elRef = useRef(null); if (!elRef.current) { const div = document.createElement("div"); elRef.current = div; } useEffect(() => { const ModalRoot = document.getElementById("modal"); ModalRoot.appendChild(elRef.current); return () => ModalRoot.removeChild(elRef.current); }, []); return createPortal(<div>{children}</div>, elRef.current); }
function Modal({ onClose, children, bottom = false }) { const modalRoot = isBrowser && document.getElementById('modal-root') let scrollTop = 0 useEffect(() => { scrollTop = window.scrollY document.body.style.top = `-${window.scrollY}px` document.body.classList.add('modal-open') return () => { document.body.classList.remove('modal-open') document.body.style.removeProperty('top') window.scrollTo(0, parseInt(scrollTop, 10)) } }, []) return modalRoot ? ReactDOM.createPortal( <DarkOverlay onClick={onClose} bottom={bottom}> <Sheet bottom={bottom} onClick={e => e.stopPropagation()} onScroll={e => e.stopPropagation()} > {children} </Sheet> </DarkOverlay>, modalRoot ) : null }
render() { const { show, body, acceptText, cancelText, } = this.props; const { fadeOut } = this.state; if (show) { return createPortal( <ConfirmModalView body={body} acceptText={acceptText} cancelText={cancelText} handleAccept={this.handleAccept} handleCancel={this.handleCancel} fadeOut={fadeOut} />, modalRoot, ); } return null; }
return createPortal( <DimmerContext.Provider value={ctx}> <div className={classes}>
const Modal = props => { if (!props.visible) return null; return createPortal( <div style={{
render() { return createPortal(this.props.children, this.el); }
const Modal = ({ children }) => { const elRef = useRef(null); if (!elRef.current) { elRef.current = document.createElement("div"); } useEffect(() => { modalRoot.appendChild(elRef.current); return () => modalRoot.removeChild(elRef.current); }, []); return createPortal(<div>{children}</div>, elRef.current); }
render() { return createPortal( this.props.children, document.getElementById('modal-container') ) }