

  <!-- Link para o CSS do Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEJ03XxIZzqF1XzLgX64NJo/WzOgoqff/xg6J9r5V9FZlGjk57T8FJXekV0Us" crossorigin="anonymous">


<!-- Botão para abrir o modal -->
<!-- Este botão é opcional agora, pois o modal vai abrir automaticamente -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" style="display: none;">
  Abrir Popup
</button>

<!-- Modal (Popup) -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Título do Popup</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
      </div>
      <div class="modal-body">
        <!-- Imagem dentro do Popup -->
        <img src="../image/popup.jpg" alt="Imagem do Popup" class="img-fluid">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Ação no Popup</button>
      </div>
    </div>
  </div>
</div>

<!-- Script do Bootstrap (para funcionalidades como o Modal) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-OgVRvuATP1z7JjJ8duH9xBXxXMlDqTq3mjzZk9aQKfM4eWz9Ra2Vh8gkBdMZ7WCI" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-9mWsdwl6SzjjyHq4NjgX8+bR6nMv54UwVLBkF2QU5rsCRnHzM71yVgsKPykogU51" crossorigin="anonymous"></script>

<script>
  // Quando a página for carregada, o modal será exibido automaticamente
  window.onload = function() {
    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
      keyboard: false  // Opção para fechar o modal apenas pelo botão
    });
    myModal.show();  // Mostra o modal automaticamente
  };
</script>


