<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>
