Modal buttom

by Getulio Ferreira

HTML

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

<div id="modalContainer">
  <div id="modalContent">
    <h2>Modal Title</h2>
    <p>This is the modal content.</p>
    <button id="closeButton">Close</button>
  </div>
</div>

CSS

#modalContainer {
  display: none;
  position: fixed;
  z-index: 9999;
  bottom: 20px;
  right: 20px;
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
}

#modalContent {
  height: 100%;
}

#modalButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

#closeButton {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

JavaScript

const modalButton = document.getElementById('modalButton');
const modalContainer = document.getElementById('modalContainer');
const closeButton = document.getElementById('closeButton');

modalButton.addEventListener('click', function() {
  modalContainer.style.display = 'block';
});

closeButton.addEventListener('click', function() {
  modalContainer.style.display = 'none';
});