1
resposta

Como faço para carregar um arquivo html no modal?

Como faço para abrir uma arquivo html no modal, ou uma página da internet no modal.

1 resposta

Fala, Marcos, beleza?

Para abrir um arquivo HTML no modal, você pode usar o JavaScript para criar uma janela modal e carregar o conteúdo do arquivo HTML na janela modal.

Exemplo:


<!-- Botão para abrir a janela modal -->
<button onclick="openModal()">Abrir modal</button>

<!-- Janela modal -->
<div id="myModal" class="modal">
  <!-- Conteúdo da janela modal -->
  <div class="modal-content">
    <span class="close">×</span>
    <div id="modalContent"></div>
  </div>
</div>

<script>
  // Função para abrir a janela modal
  function openModal() {
    // Obtém a janela modal
    var modal = document.getElementById("myModal");

    // Carrega o conteúdo do arquivo HTML na janela modal
    document.getElementById("modalContent").innerHTML = '<object type="text/html" data="arquivo.html"></object>';

    // Mostra a janela modal
    modal.style.display = "block";
  }

  // Função para fechar a janela modal
  function closeModal() {
    // Obtém a janela modal
    var modal = document.getElementById("myModal");

    // Fecha a janela modal
    modal.style.display = "none";
  }

  // Quando o usuário clicar no botão de fechar, fecha a janela modal
  var span = document.getElementsByClassName("close")[0];
  span.onclick = function() {
    closeModal();
  }

  // Quando o usuário clicar fora da janela modal, fecha a janela modal
  window.onclick = function(event) {
    if (event.target == modal) {
      closeModal();
    }
  }
</script>

Se ficar com dúvidas me chama no Instagram ou no Twitter, @andyycode