React Sample Project - Part 5

Before starting on this video, you should make sure you have completed the modal window component with vanilla javascript.

Here's the markup that you'll need for the Modal.js component:

<div className="overlay">
  <div className="modalWindow">
    <div className="titleBar">
      <h2 className="title">{title}</h2>
      <span className="closeButton" onClick={onClose}>X</span>
    </div>
    <div className="modalContent">
      {children}
    </div>
  </div>
</div>

Here's the code for Modal.module.css:

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(127,127,127, 0.9);
  opacity: .80;
  z-index: 200;
}

.modalWindow {
  text-align: center;
  background-color: white;
  width: 400px;
  padding: 5px;
  border:3px solid black;
  z-index:201;
  overflow: hidden;
}

.titleBar{
  display: flex;
  align-items: center;
}

.title{
  flex:1;
}

.modalContent{
  padding:10px;
  height: 100%;
}

.closeButton{
  height: 44px;
  width:44px;
  font-weight: bold;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}