Modal Simples

modal simples

MODAL

Código

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New Features in Enepta</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <!-- Custom CSS -->
  <style>
    .modal-content {
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .modal-header {
      border-bottom: none;
    }
    .modal-title {
      font-weight: bold;
      font-size: 1.5rem;
    }
    .modal-body img {
      width: 100%;
      border-radius: 8px;
      margin-top: 10px;
    }
    .learn-more {
      text-decoration: none;
      color: #007bff;
      font-weight: bold;
    }
    .close-btn {
      border: none;
      background-color: transparent;
      font-size: 1.5rem;
    }
    .whats-new-header {
      font-size: 1rem;
      font-weight: bold;
      color: #999;
    }
    .action-btn {
      background-color: #007bff;
      color: white;
      border-radius: 25px;
      padding: 5px 15px;
      text-decoration: none;
    }
  </style>
</head>
<body>

<!-- Button to Open Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newFeaturesModal">
 Abrir modal
</button>

<!-- Modal -->
<div class="modal fade" id="newFeaturesModal" tabindex="-1" aria-labelledby="newFeaturesModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title whats-new-header">What's new</h5>
        <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close">&times;</button>
      </div>
      <div class="modal-body">
        <h2 class="modal-title">Let's make your workflow better</h2>
        <p>Check out our new course at Enepta, designed to streamline your workflow and improve collaboration. Our lessons are built to teach you practical tips for managing projects efficiently. Get started today and earn a digital badge once you complete the course. Let's optimize your work together!</p>
        <a href="https://enepta.com" class="learn-more">Learn more and sign up</a>
        <img src="https://via.placeholder.com/700x300" alt="Course Preview Image">
        <p>Want to see how these skills work in real-time? Join our live webinar and see it in action. Register for the webinar and enhance your productivity with Enepta's expert tools.</p>
        <a href="https://enepta.com" class="action-btn">Join Webinar</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Mark as Read</button>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>
</html>