React Sample Project - Part 5

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

NOTE: Some of the code samples that you'll need for this activity are below the video. Just scroll down to see them

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