class Popup extends React.Component { render() { return ( <div className='popup'> <div className='popup_inner'> <h1>{this.props.text}</h1> <button onClick={this.props.closePopup}>close me</button> </div> </div> ); } } class App extends React.Component { constructor() { super(); this.state = { showPopup: false }; } togglePopup() { this.setState({ showPopup: !this.state.showPopup }); } render() { return ( <div className='app'> <h1>hihi</h1> <button onClick={this.togglePopup.bind(this)}>show popup</button> <button onClick={() => {alert('woooooooot?');}}>try me when popup is open</button> <p>Ganz

class PopUp extends React.Component{ constructor(){ super(); this.state = { animation_name : '', depth: '', fade: '' }; } closePopUp(){ this.setState({animation_name: 'animate-out'}); this.setState({depth:'above'}); this.setState({fade:'fade-out'}); } openPopUp(){ this.setState({animation_name: 'animate-in'}); this.setState({depth:'below'}); this.setState({fade:'fade-in'}); } render(){ return ( <div> <button className="opener" id={this.state.depth} onClick={this.openPopUp.bind(this)}>Open Pop Up</button> <section id="pop-up" className={this.state.animation_name}> <div id="innerPopUp" className

class Popup extends React.Component { render() { return( <div id="popup"> <h2 className="green">{this.props.text}</h2> <button onClick={this.props.closePopup}>Close</button> </div> ); } } class App extends React.Component { constructor() { super(); ...

'shown' : ''}`} ref={popupRef} > <div>menu</div> <button onClick={handleCloseButtonClick}> Close Menu </button> </div> </div> ) } const App = () => ( <div className="container"> <PopupMenu /> </div> ) ReactDOM.render(<App />, document.getElementById('app'))

/*#__PURE__*/ React.createElement("div", { className: "popup" }, /*#__PURE__*/ React.createElement("div", { className: "popup-inner" }, /*#__PURE__*/ React.createElement("button", { className: "close-btn", onClick: () => props.setTrigger(false) }, "close"), props.children)) : null; } function App(props) { const [popup, setPopup] = useState(false); return /*#__PURE__*/( React.createElement("div", null, /*#__PURE__*/ React.createElement("main", null, /*#__PURE__*/ React.createElement("br", null), /*#__PURE__*/ React.createElement("button", { onClick: () => setPopup(true) }, "Open Popup")), /*#__PURE__*/ React.createElement(Popup, { trigger: popup, setTrigger: setPopup }, /*#__PURE__*/ React.createElement("h3", null, "My popup"), React.createElement("h6", null, "Lorem ipsum dolor sit, amet consectetur adipisicing elit.

window.onload = function() { ReactDOM.render(<ReactPopup />, document.getElementById('popupContainer')); document.querySelector('button').addEventListener('click', openPopup); } function openPopup() { if(typeof Popup == "undefined") { return; } Popup.open(<div> <div className="body">Mon message</div> <div className="footer"> <button className="btn default" onClick={() => Popup.close()}>Cancel</button> </div> </div>); } class ReactPopup extends React.Component { constructor(props) { super(props); this.state = { active: false, content: "" }; this.open = this.open.bind(this); this.close = this.cl

// CLASS POPUP class PopUp extends React.Component { constructor() { super(); this.onDocumentClick = this.onDocumentClick.bind(this); } componentDidMount() { document.addEventListener('click', this.onDocumentClick); } componentWillUnmount() { document.removeEventListener('click', this.onDocumentClick); } onDocumentClick (event) { let pointer = event.target; const element = ReactDOM.findDOMNode(this); while (pointer !== document && pointer) { if (pointer === element) { return; } pointer = pointer.parentNode; } this.props.onClose(); } render() { return <div className="popUpContainer"> <button cl

$(function() { $(".like-btn").hover(function() { $(".reaction-icon").each(function(i, e) { setTimeout(function() { $(e).addClass("show"); }, i * 100); }); }, function() { $(".reaction-icon").removeClass("show") }); })

class PopupMenu extends React.Component { constructor(props) { super(props); this.state = { isShownMenu : false } this.onClickButton = this.onClickButton.bind(this); this.onMouseEnter = this.onMouseEnter.bind(this); this.onMouseLeave = this.onMouseLeave.bind(this); } onClickButton() { this.setState({ isShownMenu : !this.state.isShownMenu }); } onMouseEnter() { this.setState({ isShownMenu : true }) } onMouseLeave() { this.setState({ isShownMenu : false }) } render() { return( <div className="PopupMenu" aria-expanded={this.state.isShownMenu} onMouseEnter={this.onMouseEnter} onMouseLeave={this.on

class App extends React.Component { constructor(props) { super(props) this.state = { isModalOpen: false } } render() { return ( <div> <button onClick={() => this.openModal()}>Open modal</button> <Modal isOpen={this.state.isModalOpen} onClose={() => this.closeModal()}> <h3>Modal title</h3> <p>Content</p> </Modal> </div> ) } openModal() { this.setState({ isModalOpen: true }) } closeModal() { this.setState({ isModalOpen: false }) } } class Modal extends React.Component { render() { if (this.props.isOpen === false) return null return ( <div> <div className="modal"> {this.props.children} </div> <div className="bg" onClick={e => this.close(e)}/> </div> ) } close(e) { e.preventDefault() if (this.props.onClose) { this.props.onClose() } } } ReactDOM.render(<App/>, document.getElementById('root'))

class Modal extends React.Component { static propTypes = { isModalOpen: React.PropTypes.bool.isRequired, closeModal: React.PropTypes.func.isRequired, style: React.PropTypes.shape({ modal: React.PropTypes.object, overlay: React.PropTypes.object }) }; constructor(props) { super(props); this.outerStyle = { position: "fixed", top: 0, left: 0, width: "100%", height: "100%", overflow: "auto", zIndex: 1 }; // default style this.style = { modal: { position: "relative", width: 500, padding: 20, boxSizing: "border-box", backgroundColor: "#fff", margin: "40px auto", borderRadius: 3, zIndex: 2, textAlign:

const App = React.createClass({ getInitialState : function() { return({ modal: false }); }, modalToggle : function() { this.setState({modal: !this.state.modal}) }, render : function(){ return( <div> <button className="place-order" onClick={this.modalToggle}> <span className="fa fa-shopping-cart"></span> </button> <Modal onClick={this.modalToggle} status={this.state.modal}/> </div> ); } }); const Modal = React.createClass({ getDefaultProps : function(){ return({ title: "Ova Highchair", description: "From formula to fruits, your baby's got a lot of eating ahead.

class App extends React.Component { constructor(props) { super(props); this.state = { // modal should be closed on page load isModalOpen: false }; // binding methods this.openModal = this.openModal.bind(this); this.closeModal = this.closeModal.bind(this); } openModal() { this.setState({ isModalOpen: true}) } closeModal () { this.setState({ isModalOpen: false }) } render () { return ( <div> <button onClick={this.openModal}>Open the modal</button> <Modal isOpen={this.state.isModalOpen} onClose={this.closeModal}/> </div> ); } } // <Modal /> class Modal extends React.Component { render () { const { isOpen, onClose } = this.props; return ( <div className={isOpen ?

const { useState, useEffect } = React; const Modal = ({ onRequestClose }) => { // Use useEffect to add an event listener to the document useEffect(() => { function onKeyDown(event) { if (event.keyCode === 27) { // Close the modal when the Escape key is pressed onRequestClose(); } } // Prevent scolling document.body.style.overflow = "hidden"; document.addEventListener("keydown", onKeyDown); // Clear things up when unmounting this component return () => { document.body.style.overflow = "visible"; document.removeEventListener("keydown", onKeyDown); }; }); return ( <div className="modal__backdrop"> <div className="modal__container"> <h3 className="modal__title">I'm a modal!</h3> <p> When this modal is open, we disable scrolling the <code>body</code> using{" "} <code>overflow: hidden</code>. This allows users to scroll the modal without losing their position on the page.

const styled = styled.default function ... type="hidden" name="liked" value={liked} /> <Button type="submit">Submit</Button> </form> </Popup> </Overlay> ); } class Example extends React.Component { constructor(...params) { super(...params); this.state = { liked: 0, } this.events = ...

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing. If active, Pens will autosave every 30 seconds after being saved once. If enabled, the preview panel updates automatically as you code.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

simple-react-popup-example.markdown · A Pen by Bastian Albers on CodePen. License. Raw · style.css · This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.

CodePen doesn't work very well without JavaScript · We're all for progressive enhancement, but CodePen is a bit unique in that it's all about writing and showing front end code, including JavaScript. It's required to use most of the features of CodePen · Need to know how to enable it?

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.