JSFiddle - React, Tailwind, and code Playground

by kpulkit29

HTML

<button id="openModalBtn">Open Modal</button>

  <!-- Modal -->
  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>Are you sure you want to go back the meeting is still in progress?</p>
        <div class="modal-footer">
          <button class="accept-call">
              No, go back to call
          </button>
          <button class="deny-call">
              Yes, end call
          </button>
      </div>
    </div>
  </div>

CSS

/* Modal background */
.modal {
  display: none; /* Hidden by default */
  position: fixed; 
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
}

/* Modal content box */
.modal-content {
  background-color: #fff;
  margin: 30% auto; /* 15% from top and centered */
  padding: 20px;
  border-radius: 8px;
  width: 70%; /* Could be dynamic */
  text-align: center;
  position: relative;
}

/* Close button */
.close {
  color: #aaa;
  position: absolute;
  top: 2px;
  right: 10px;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-footer {
  display: flex;
  bottom: 4px;
  width: 100%;
  grid-gap: 10px;
  margin: auto 10px;
  justify-content: right;
}

.modal-footer button {
  border: 1px solid black;
  border-radius: 10rem;
  padding: 6px;
  background: white;
  color: #0f1111;
}

.modal-footer .accept-call {
    background: #ffd814;
    border-color: #ffd814;
}

.modal-footer .deny-call{
  border-color: #888c8c
}

JavaScript

// Get modal elements
const modal = document.getElementById("myModal");
const openModalBtn = document.getElementById("openModalBtn");
const closeModalBtn = document.getElementsByClassName("close")[0];

// Open modal
openModalBtn.onclick = function() {
  modal.style.display = "block";
}

// Close modal when the close button is clicked
closeModalBtn.onclick = function() {
  modal.style.display = "none";
}

// Close modal when user clicks outside the modal content
window.onclick = function(event) {
  if (event.target === modal) {
    modal.style.display = "none";
  }
}