Modal simples

Para usar modal em seu projeto é necessário uso de javascript e de um botão que será usado como gatilho para exibir o modal. Abaixo é apresentado um exemplo simples de modal tanto seu código HTML como o Javascript respectivamente.

Exibir modal

<button class="btn red" id="modal-show">Exibir modal</button>
<!-- começo do modal -->
<div id="myModal" class="modal">
  <div class="modal-card">
    <span class="close">×</span>
    <div class="modal-content">
      modal simples
    </div>
  </div>
</div>
<!-- fim do modal -->

          

  let modal = document.getElementById('myModal');
  document.getElementById("modal-show").addEventListener('click', () => {
    modal.style.display = "block"; 
  });
  document.getElementsByClassName("close")[0].addEventListener('click', () => {
    modal.style.display = "none";
  });
  window.addEventListener('click', (event) => {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  });
          

Caso queria adicionar um titulo e footer ao seu modal você pode. Veja um exemplo abaixo:

Exibir modal

<button class="btn green" id="modal-show">Exibir modal</button>
<!-- começo do modal -->
<div id="myModal" class="modal">
  <div class="modal-card">
    <span class="close">×</span>
    <div class="modal-title">
      <h2>Titulo do modal</h2>
    </div>

    <div class="modal-content">
      texto e mais texto do modal
    </div>

    <div class="modal-footer">
      footer do modal
    </div>
  </div>
</div>
<!-- fim do modal -->

          

  let modal = document.getElementById('myModal');
  document.getElementById("modal-show").addEventListener('click', () => {
    modal.style.display = "block"; 
  });
  document.getElementsByClassName("close")[0].addEventListener('click', () => {
    modal.style.display = "none";
  });
  window.addEventListener('click', (event) => {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  });