React

by ruhul105

HTML

<div id="app"></div>

CSS

html, body, #react_app, #react_app > div {
  height: 100%;
}
/*
  Modal Overlay
*/
.modal-overlay {
  background:rgba(0,0,0,.8);
  height: 100%;
  left: 0;
  display: flex;    // This is IE 11+
  overflow: auto;
  padding: 1.5em;
  position: fixed;
  top: 0;
  //transition: opacity .2s;
  width: 100%;
  z-index: -1;
}

.modal-overlay[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
}

.modal-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/*
  Modal Content Area
*/
.modal-content {
  background: #efefef;
  margin: auto;
  max-width: 800px;
  overflow: auto;
  overflow-x: hidden;
  padding: 1.5em;
  position: relative;
  //transform: scale(.8); // This sets the size to 80%, which is set to 100% below...
  //transition: transform .3s;
  width: 100%;
}

.modal-overlay[aria-hidden="false"] .modal-content {
  //transform: scale(1);
  //transform: rotate(7deg);
}

/*
  General Modal Content
*/
#modal-title {
  margin-top: 0;
  padding-right: 1.25em;
}

/*
  Close Modal Button
*/
.btn-close {
  background: none;
  border: none;
  cursor: pointer;
  font-family: arial;
  //font-size: 2em;
  //font-weight: 800;
  font-size:1.2em;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: .25em;
  top: .25em;
  z-index: 2;
}

.btn-close:hover {
  color: #c12f48;
}

.btn-close:focus {
  outline: 1px dotted;
}

.modal-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  justify-content: center;
  color: white;
}

.modal-item {
  align-self: center;
}

img {
  width: 200px;
  height: 200px;
}

.glyphicon {
  font-size: 20px;
  padding: 10px;
  color: white;
  cursor: pointer;
}

.btn {
  margin: 10px;
}

React

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { modalOpen: false };
  }
  
    // Toggle Modal visibility
  toggleModal() {
    // Update state: modal visibility and its content
    this.setState({ modalOpen: true });
  }
  
  render() {
  const { modalOpen } = this.state;
  console.log(this.state)
    return (
     <div>
        { /* Modal */ }
        <Modal show={ modalOpen } 
           onClose={ this.toggleModal }>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed eaque laudantium illo, veritatis dicta enim reprehenderit est voluptatibus harum, iusto debitis consectetur illum, veniam sit animi facilis accusamus ullam assumenda.</p>
        </Modal>
          
        { /* Buttons: open modals */ }
        <button className="btn" 
          onClick={() => this.toggleModal()}>
            Business
        </button>
          
       </div>
    )
  }
}

class Modal extends React.Component {
  render() {
    const { show, closeModal } = this.props;
    // Custom styles: set visibility and backbround color
    const styles = {
      modal: {
        display: (show) ? null : 'none', 
        backgroundColor: 'rgba(153, 153, 153, 0.8)',       
      }
    };
    
    return (
        <div className="modal-overlay" id="modal_window" aria-hidden="true" role="dialog" aria-labelledby="modal_title">
      <div className="modal-content" id="modal_holder" role="document">

          <h1>Modal Title</h1>
          <p>Content goes in here</p>
        <button className="btn-close" id="modal_close" type="button" aria-label="close">&times;</button>
      </div>
    </div> 
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))