Modal

Kopierbar kode

<div class="container mt-4">
  <h2>Bootstrap 5 Modal-eksempler</h2>
  <p>Nedenfor ses to eksempler på modal-vinduer opdateret til Bootstrap 5.</p>

  <!-- Bootstrap 5 CSS (indlæst direkte i body) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootstrap 5 JS Bundle with Popper (indlæst direkte i body) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Eksempel 1 -->
  <div class="mb-4">
    <h3>Basic Modal Example 1</h3>
    <!-- Trigger the modal with a button -->
    <button
      type="button"
      class="btn btn-lg"
      data-bs-toggle="modal"
      data-bs-target="#myModal1"
      style="background-color: #3f5b58; color: #ffffff; border: none; padding: 10px 20px; border-radius: 4px;"
      onmouseover="this.style.backgroundColor='#36504f'"
      onmouseout="this.style.backgroundColor='#3f5b58'">
      Open Modal
    </button>

    <!-- Modal -->
    <div id="myModal1" class="modal fade" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" style="border-bottom: 1px solid #dee2e6; padding: 10px 15px;">
            <h5 class="modal-title">Modal Header</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
              style="padding: 10px;">
            </button>
          </div>
          <div class="modal-body" style="padding: 20px;">
            <p>
              <img
                class="img-fluid"
                role="presentation"
                src="https://lms.fels.dk/pluginfile.php/266901/course/section/13596/Tekniske-vejledninger1600x400.jpg?time=1625664399918"
                alt=""
                width="100%"
                style="border-radius: 4px;">
            </p>
          </div>
          <div class="modal-footer" style="border-top: 1px solid #dee2e6; padding: 10px 15px;">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
              style="background-color: #6c757d; color: #ffffff; border: none; padding: 5px 15px; border-radius: 4px;">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Eksempel 2 -->
  <div class="mb-4">
    <h3>Basic Modal Example 2</h3>
    <!-- Trigger the modal with a button -->
    <button
      type="button"
      class="btn btn-sm"
      data-bs-toggle="modal"
      data-bs-target="#myModal2"
      style="background-color: #3f5b58; color: #ffffff; border: none; padding: 5px 10px; border-radius: 4px;"
      onmouseover="this.style.backgroundColor='#36504f'"
      onmouseout="this.style.backgroundColor='#3f5b58'">
      Open Modal
    </button>

    <!-- Modal -->
    <div id="myModal2" class="modal fade" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" style="border-bottom: 1px solid #dee2e6; padding: 10px 15px;">
            <h5 class="modal-title">Titel på modalen</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
              style="padding: 10px;">
            </button>
          </div>
          <div class="modal-body" style="padding: 20px;">
            <p>Her kan der skrives tekst</p>
          </div>
          <div class="modal-footer" style="border-top: 1px solid #dee2e6; padding: 10px 15px;">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
              style="background-color: #6c757d; color: #ffffff; border: none; padding: 5px 15px; border-radius: 4px;">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1. Tilpasning af knappernes farver

Knapperne er tilpasset med farven #3f5b58 (baggrund) og #ffffff (tekst). Du kan ændre dette ved at bruge inline styles direkte på knappen:

<button
  type="button"
  class="btn btn-lg"
  data-bs-toggle="modal"
  data-bs-target="#myModal1"
  style="background-color: #3f5b58; color: #ffffff; border: none; padding: 10px 20px; border-radius: 4px;"
  onmouseover="this.style.backgroundColor='#36504f'"
  onmouseout="this.style.backgroundColor='#3f5b58'">
  Open Modal
</button>

Forklaring af inline styles:

• background-color: #3f5b58;: Sætter baggrundsfarven til mørkegrøn.
• color: #ffffff;: Sætter tekstfarven til hvid.
• border: none;: Fjerner knapens kant.
• padding: 10px 20px;: Tilføjer padding for at gøre knappen større.
• border-radius: 4px;: Afrunder hjørnerne på knappen.
• onmouseover="this.style.backgroundColor='#36504f'": Ændrer baggrundsfarven, når musen føres hen over knappen.
• onmouseout="this.style.backgroundColor='#3f5b58'": Gendanner den oprindelige baggrundsfarve, når musen fjernes.

2. Yderligere tilpasninger

Du kan tilpasse modal-vinduerne yderligere ved at ændre følgende:

• Modal-header og -footer:
  • Tilføj kantlinjer eller baggrundsfarver ved at bruge inline styles:

    <div class="modal-header" style="border-bottom: 1px solid #dee2e6; padding: 10px 15px;">

• Modal-body:
  • Juster padding, margin eller baggrundsfarve for at tilpasse indholdet:

    <div class="modal-body" style="padding: 20px; background-color: #f8f9fa;">

• Størrelse på modal:
  • Brug modal-lg eller modal-sm på modal-dialog for at ændre modalens bredde:

    <div class="modal-dialog modal-lg">