1. Bootstrap Modal (Popup Window)

Step 1: Create a Basic Modal

• Use .modal to define the modal structure.

• Inside, add .modal-dialog, .modal-content, .modal-header, .modal-body, and .modal-footer.

👉 Example: Basic Modal

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

<!-- Modal Structure -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Basic Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This is a simple Bootstrap modal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

✅ Explanation:

• data-bs-toggle="modal" triggers the modal.

• data-bs-target="#myModal" links the button to the modal.

• .modal-dialog defines the modal's container.

• .modal-header, .modal-body, and .modal-footer define sections inside the modal.

• .btn-close adds a close button.

Step 2: Add a Large or Small Modal

• Use .modal-lg for a large modal.

• Use .modal-sm for a small modal.

👉 Example: Large & Small Modals

<!-- Large Modal -->
<div class="modal fade" id="largeModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Large Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This is a large modal.
      </div>
    </div>
  </div>
</div>

<!-- Small Modal -->
<div class="modal fade" id="smallModal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Small Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This is a small modal.
      </div>
    </div>
  </div>
</div>

✅ Explanation:

• .modal-lg makes the modal large.

• .modal-sm makes the modal small.

Step 3: Add a Modal with a Form

• Use <form> inside .modal-body to collect user input.

👉 Example: Modal with a Form

<!-- Button to trigger modal -->
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#formModal">
  Open Form Modal
</button>

<!-- Modal with Form -->
<div class="modal fade" id="formModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Login Form</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label class="form-label">Email</label>
            <input type="email" class="form-control" placeholder="Enter your email">
          </div>
          <div class="mb-3">
            <label class="form-label">Password</label>
            <input type="password" class="form-control" placeholder="Enter your password">
          </div>
          <button type="submit" class="btn btn-primary">Login</button>
        </form>
      </div>
    </div>
  </div>
</div>

✅ Explanation:

• .form-control styles the input fields.

• .btn-primary styles the login button.

Step 4: Add a Modal with Animation

• Use .fade to add a smooth animation effect when opening the modal.

👉 Example: Animated Modal

<div class="modal fade" id="animatedModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Animated Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This modal opens with a fade effect.
      </div>
    </div>
  </div>
</div>

Step 5: Open Modal Automatically on Page Load

• Use JavaScript to trigger the modal when the page loads.

👉 Example: Auto-Open Modal

<script>
  window.onload = function () {
    var myModal = new bootstrap.Modal(document.getElementById('autoModal'));
    myModal.show();
  };
</script>

<div class="modal fade" id="autoModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Welcome</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This modal appears automatically on page load.
      </div>
    </div>
  </div>
</div>

✅ Explanation:

• JavaScript function window.onload triggers the modal when the page loads.

Conclusion

Bootstrap modals & popups allow developers to create responsive and interactive dialogs for user input, alerts, or forms. By following these steps, you can enhance the user experience and improve website functionality. 🚀