"modal rea"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ph1p/pen/XjNONb?depth=everything&order=popularity&page=25&q=react&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles"></style></head><body> <div id="app"></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script> <script >"use strict"; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) {if (window.CP.shouldStopExecution(2)){break;} var source = arguments[i]; for (var key in source) {if (window.CP.shouldStopExecution(1)){break;} if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } window.CP.exitedLoop(1); } window.CP.exitedLoop(2); return target; }; var _class, _temp; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var Modal = (_temp = _class = function (_React$Component) { _inherits(Modal, _React$Component); function Modal(props) { _classCallCheck(this, Modal); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.outerStyle = { position: 'fixed', top: 0, left: 0, width: "100%", height: "100%", overflow: "auto", height: "100%", zIndex: 1 }; // default style _this.style = { modal: _extends({ position: "relative", width: 500, padding: 20, boxSizing: 'border-box', backgroundColor: '#fff', margin: '40px auto', borderRadius: 3, zIndex: 2, textAlign: 'left', boxShadow: '0 20px 30px rgba(0, 0, 0, 0.2)' }, _this.props.style.modal), overlay: _extends({ position: 'fixed', top: 0, bottom: 0, left: 0, right: 0, width: "100%", height: "100%", backgroundColor: 'rgba(0,0,0,0.5)' }, _this.props.style.overlay) }; return _this; } // render modal Modal.prototype.render = function render() { return React.createElement( "div", { style: _extends({}, this.outerStyle, { display: this.props.isModalOpen ? 'block' : 'none' }) }, React.createElement("div", { style: this.style.overlay, onClick: this.props.closeModal }), React.createElement("div", { onClick: this.props.closeModal }), React.createElement( "div", { style: this.style.modal }, this.props.children ) ); }; return Modal; }(React.Component), _class.propTypes = { isModalOpen: React.PropTypes.bool.isRequired, closeModal: React.PropTypes.func.isRequired, style: React.PropTypes.shape({ modal: React.PropTypes.object, overlay: React.PropTypes.object }) }, _temp); // overwrite style var modalStyle = { overlay: { backgroundColor: 'rgba(0, 0, 0,0.5)' } }; var mainStyle = { app: { margin: '120px 0' }, button: { backgroundColor: '#408cec', border: 0, padding: '12px 20px', color: '#fff', margin: '0 auto', width: 150, display: 'block', borderRadius: 3 } }; var App = function (_React$Component2) { _inherits(App, _React$Component2); function App(props) { _classCallCheck(this, App); // set initial state var _this2 = _possibleConstructorReturn(this, _React$Component2.call(this, props)); _this2.state = { isModalOpen: false, isInnerModalOpen: false }; // bind functions _this2.closeModal = _this2.closeModal.bind(_this2); _this2.openModal = _this2.openModal.bind(_this2); return _this2; } // close modal (set isModalOpen, true) App.prototype.closeModal = function closeModal() { this.setState({ isModalOpen: false }); }; // open modal (set isModalOpen, false) App.prototype.openModal = function openModal() { this.setState({ isModalOpen: true }); }; // render app App.prototype.render = function render() { return React.createElement( "div", { style: mainStyle.app }, React.createElement( "button", { style: mainStyle.button, onClick: this.openModal }, "Open modal" ), React.createElement( Modal, { isModalOpen: this.state.isModalOpen, closeModal: this.closeModal, style: modalStyle }, React.createElement("img", { width: "100%", style: { borderRadius: 3 }, src: "https://source.unsplash.com/random", alt: "unsplash" }), React.createElement( "button", { style: _extends({}, mainStyle.button, { margin: 0, width: 'auto', marginTop: 10 }), onClick: this.closeModal }, "Close" ) ) ); }; return App; }(React.Component); ReactDOM.render(React.createElement(App, null), document.getElementById('app')); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: