Bootstrap - Modals Demo

Creating a Basic Modal

To create a basic Modal in Bootstrap, you need to understand the Modal's structure and the classes used to define its components. A Modal consists of three main parts: the header, body, and footer.

The Modal structure starts with a <div> element that has the classes .modal and .fade. The .modal class sets up the basic styling for the Modal, while the .fade class adds a transition effect when the Modal is shown or hidden.

Inside the .modal <div>, you'll find another <div> with the class .modal-dialog. This element is responsible for setting the width and positioning of the Modal within the page.

The content of the Modal is wrapped in a <div> with the class .modal-content. This is where you'll add the Modal header, body, and footer.

The Modal header is defined by a <div> with the class .modal-header. It usually contains an <h5> element with the class .modal-title for the Modal's title and a close button with the class .btn-close for dismissing the Modal.

The Modal body is wrapped in a <div> with the class .modal-body. This is where you'll add the main content of the Modal, such as text, images, or form elements.

The Modal footer, if needed, is defined by a <div> with the class .modal-footer. It typically contains action buttons like "Save" or "Cancel".

To trigger the Modal and make it visible, you can use a button or a link. Add the data-bs-toggle="modal" attribute to the button or link, and set the data-bs-target attribute to the ID of the Modal you want to open.

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

When the button is clicked, the Modal with the corresponding ID will be shown.

With this basic structure and classes, you can create a working Modal in your Bootstrap project. In the next sections, we'll look at how to customize the Modal content and apply various options and attributes to make the Modal more interactive and visually appealing.

Customizing Modal Content

Once you have created a basic Modal in Bootstrap, you can customize its content to fit your needs. The Modal body (.modal-body) is where you'll add the main content, such as text, images, videos, or any other HTML elements.

To add text to the Modal, include the desired text within the .modal-body <div>. You can use standard HTML tags like <p>, <h1> to <h6>, <ul>, <ol>, and others to structure and format your text content.

Images can be added to the Modal by using the <img> tag within the .modal-body. Set the src attribute to the path or URL of the image you want to display. You can also apply Bootstrap's image classes, such as .img-fluid, to make the image responsive and fit within the Modal.

To embed videos in the Modal, you can use the <video> HTML5 tag or embed videos from platforms like YouTube or Vimeo using their provided embed code. Place the video embed code inside the .modal-body to have it appear within the Modal.

In addition to adding content, you can style the Modal using CSS to match your project's design. You can target the Modal's classes or add your own custom classes to apply specific styles. For example, you can change the background color of the Modal, adjust the padding or margin of the Modal elements, or style the text using CSS properties like color, font-size, and font-weight.

Bootstrap provides utility classes that you can use to style and format the Modal content. Some commonly used classes include:

You can apply these classes to the Modal elements or the content within the Modal to style and format them as needed.

<div class="modal-body">
  <h4 class="text-primary">Welcome to our website!</h4>
  <p class="lead">Here's an image of our product:</p>
  <img src="product.jpg" alt="Product Image" class="img-fluid mb-3">
  <p>Check out this video tutorial:</p>
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/12345" allowfullscreen></iframe>
  </div>
</div>

By using a combination of HTML tags, CSS styles, and Bootstrap classes, you can create appealing and well-structured content within your Modal. Experiment with different elements, styles, and layouts to create Modals that best suit your project's requirements.

Modal Options and Attributes

Bootstrap Modals have various options and attributes that let you control their behavior and appearance. You can set these options using data attributes or JavaScript.

One important option is to set the Modal size. Bootstrap has three predefined sizes: small, default, and large. To set the Modal size, add the .modal-sm class for small Modals or .modal-lg class for large Modals to the .modal-dialog element. If you don't specify any size class, the Modal will have the default size.

<!-- Small Modal -->
<div class="modal fade" id="smallModal" tabindex="-1" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    ...
  </div>
</div>

<!-- Large Modal -->
<div class="modal fade" id="largeModal" tabindex="-1" aria-labelledby="largeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    ...
  </div>
</div>

Another option is the backdrop, which is the dark overlay that appears behind the Modal when it is open. By default, the backdrop is enabled, and clicking on it will close the Modal. However, you can disable the backdrop or make it static, meaning that clicking on the backdrop won't close the Modal.

To disable the backdrop, add the data-bs-backdrop="false" attribute to the .modal element. To make the backdrop static, use data-bs-backdrop="static" instead.

<!-- Modal with disabled backdrop -->
<div class="modal fade" id="disabledBackdropModal" data-bs-backdrop="false" tabindex="-1" aria-labelledby="disabledBackdropModalLabel" aria-hidden="true">
  ...
</div>

<!-- Modal with static backdrop -->
<div class="modal fade" id="staticBackdropModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropModalLabel" aria-hidden="true">
  ...
</div>

In addition to setting options through data attributes, you can also control the Modal using JavaScript. Bootstrap has methods to show and hide Modals using JavaScript code.

To show a Modal, you can use the show method by targeting the Modal's ID:

var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();

To hide a Modal, you can use the hide method:

var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.hide();

By using these methods, you can trigger the showing and hiding of Modals based on specific events or conditions in your JavaScript code.

These are just a few examples of the options and attributes available for Bootstrap Modals. You can look at more options, such as setting the focus on a specific element when the Modal opens, changing the Modal's position, and more.

Vertically Centering Modals

Bootstrap lets you vertically center Modals on the page using the .modal-dialog-centered class. By adding this class to the .modal-dialog element, the Modal will be displayed in the middle of the viewport, regardless of its content height.

<div class="modal fade" id="centeredModal" tabindex="-1" aria-labelledby="centeredModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

This class applies flexbox properties to the .modal-dialog element, aligning its content vertically in the center of the Modal container.

The .modal-dialog-centered class works well on different screen sizes. Whether you view the Modal on a desktop, tablet, or mobile device, the Modal will remain vertically centered within the visible area of the screen.

However, if the Modal's content is taller than the viewport height, the Modal will still be centered, but the content will overflow, and you may need to scroll to view the entire content. In such cases, you can use a scrollable Modal or adjust the Modal's size responsively.

<div class="modal fade" id="scrollableCenteredModal" tabindex="-1" aria-labelledby="scrollableCenteredModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

This combination of classes will vertically center the Modal and make its content scrollable if it exceeds the viewport height.

You can also use responsive class modifiers to adjust the Modal's size based on the screen size. For example, you can use .modal-sm for small Modals on mobile devices and .modal-lg for larger Modals on desktop screens.

By applying the .modal-dialog-centered class and considering the Modal's content and responsive behavior, you can create Modals that are vertically centered and provide a better user experience across different devices and screen sizes.

Modal Events and Methods

Bootstrap Modals have events and methods that let you control the Modal's lifecycle and do actions with code. These events and methods give you more control over how your Modals work.

One of the most used Modal events is show.bs.modal. This event runs when the show method is called on a Modal. You can use this event to do things before the Modal is shown.

var myModal = document.getElementById('myModal');
myModal.addEventListener('show.bs.modal', function () {
  console.log('Modal is about to be shown');
  // Do things before the Modal is shown
});

The hide.bs.modal event runs when the hide method is called on a Modal. You can use this event to do things before the Modal is hidden.

var myModal = document.getElementById('myModal');
myModal.addEventListener('hide.bs.modal', function () {
  console.log('Modal is about to be hidden');
  // Do things before the Modal is hidden
});

Other Modal events are shown.bs.modal (runs when the Modal is fully shown) and hidden.bs.modal (runs when the Modal is fully hidden).

Bootstrap Modals also have methods that you can run with JavaScript to do specific things. The most used methods are show and hide, which let you show and hide a Modal with code.

var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();

var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.hide();

You can also toggle the visibility of a Modal using the toggle method:

var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.toggle();

These methods let you control the Modal's visibility based on your app's logic or user actions.

By using Modal events and methods, you can make more engaging user experiences with Bootstrap Modals. You can use them to run animations, update content, do data operations, or any other custom things that make your app's Modal dialogs better.

Multiple Modals and Stacked Modals

In Bootstrap, you can open multiple Modals at the same time, creating a stacked Modal effect. This can be useful in situations where you want to show related or dependent content in separate Modals.

To open multiple Modals simultaneously, you can trigger the show method on each Modal you want to display. Each Modal will open on top of the previous one, creating a stack of Modals.

var modal1 = new bootstrap.Modal(document.getElementById('modal1'));
var modal2 = new bootstrap.Modal(document.getElementById('modal2'));

modal1.show();
modal2.show();

When dealing with stacked Modals, it's important to handle the closing behavior correctly. By default, clicking on the backdrop of a stacked Modal will close all the Modals in the stack. To change this behavior and close only the topmost Modal, you can set the data-bs-backdrop attribute to static on the Modal that should remain open.

<div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="modal1Label" aria-hidden="true" data-bs-backdrop="static">
  ...
</div>

<div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="modal2Label" aria-hidden="true">
  ...
</div>

When working with multiple Modals, you may need to adjust the z-index CSS property to control the stacking order of the Modals. The Modal with the highest z-index value will appear on top of the others.

Bootstrap automatically handles the z-index of Modals, but if you have custom styles or other elements that overlap with the Modals, you may need to manually adjust the z-index values.

#modal1 {
  z-index: 1050;
}

#modal2 {
  z-index: 1060;
}

When using multiple Modals, it's important to consider the user experience and make sure that the stacked Modals do not become too complex or confusing. Use them sparingly and provide clear paths for users to close or navigate between the Modals.