Bootstrap - Modals: A Beginner's Guide

Hello there, future web developers! Today, we're going to dive into the exciting world of Bootstrap Modals. Don't worry if you've never heard of them before – by the end of this tutorial, you'll be creating pop-up windows like a pro!

What is a Modal?

Before we jump in, let's understand what a modal is. Imagine you're reading a book, and suddenly a little sticky note pops up with important information. That's essentially what a modal does on a website! It's a dialog box or popup window that appears on top of the current page.

Modal Components

Let's start with the basic structure of a Bootstrap modal:

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Let's break this down:

• The outermost <div> with class "modal" is the main container.
• Inside, we have the "modal-dialog" which controls the modal's shape and position.
• The "modal-content" holds the actual content of our modal.
• We then have three sections: header, body, and footer.

Static Backdrop

Sometimes, you want your modal to stick around until the user interacts with it. That's where the static backdrop comes in handy:

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <!-- Modal content here -->
</div>

By adding data-bs-backdrop="static", the modal won't close when clicking outside it. data-bs-keyboard="false" prevents closing with the Esc key.

Scrollable Modal

Got a lot of content? No problem! Make your modal scrollable:

<div class="modal-dialog modal-dialog-scrollable">
  <!-- Modal content here -->
</div>

Adding the modal-dialog-scrollable class allows the modal body to scroll while keeping the header and footer in place.

Vertically Centered

Want your modal to be right in the middle of the screen? Easy peasy!

<div class="modal-dialog modal-dialog-centered">
  <!-- Modal content here -->
</div>

The modal-dialog-centered class works its magic to center your modal vertically.

Tooltips and Popovers

You can even use tooltips and popovers within your modals. Just remember to initialize them:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

Using the Grid

Bootstrap's grid system works inside modals too! Here's an example:

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
    </div>
  </div>
</div>

This creates a two-column layout inside your modal body.

Varying Modal Content

You can change the content of your modal dynamically. Here's how:

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  var button = event.relatedTarget
  var recipient = button.getAttribute('data-bs-whatever')
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

This script changes the modal's content based on which button triggered it.

Toggle Between Modals

You can even switch between different modals:

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <!-- First modal content -->
  <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <!-- Second modal content -->
  <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
</div>

Change Animation

Want to spice up your modal's entrance? Try changing the animation:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <!-- Modal content -->
</div>

The fade class adds a nice fading effect. You can create custom animations using CSS!

Dynamic Heights

Modals can adjust their height based on content:

<div class="modal-dialog modal-dialog-scrollable">
  <!-- Modal content with varying heights -->
</div>

The modal-dialog-scrollable class ensures your modal looks good regardless of content length.

Accessibility

Always consider accessibility! Use aria-labelledby to reference the modal title:

<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">Modal title</h5>
        <!-- Rest of the modal content -->
      </div>
    </div>
  </div>
</div>

Optional Sizes

Modals come in different sizes:

<!-- Small modal -->
<div class="modal-dialog modal-sm">...</div>

<!-- Large modal -->
<div class="modal-dialog modal-lg">...</div>

<!-- Extra large modal -->
<div class="modal-dialog modal-xl">...</div>

Fullscreen Modal

Want your modal to take over the entire screen? Use the fullscreen classes:

<div class="modal-dialog modal-fullscreen">
  <!-- Modal content -->
</div>

You can also make it fullscreen only on certain screen sizes:

<div class="modal-dialog modal-fullscreen-sm-down">
  <!-- Modal content -->
</div>

This modal will be fullscreen on small screens and below.

And there you have it! You're now equipped with the knowledge to create amazing modals using Bootstrap. Remember, practice makes perfect, so don't be afraid to experiment with these concepts. Happy coding!

Method	Description
.modal(options)	Activates your content as a modal. Accepts an optional options object.
.modal('toggle')	Manually toggles a modal.
.modal('show')	Manually opens a modal.
.modal('hide')	Manually hides a modal.
.modal('handleUpdate')	Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
.modal('dispose')	Destroys an element's modal.

Credits: Image by storyset