Bootstrap Modal Plugin

Source: Bootstrap 5

Introduction

A Bootstrap Modal Plugin is a separate child window floating over the parent window. Its purpose is to provide additional information and interaction to the user without leaving the parent window.

How it works

Include the following link in the <head> element to use Bootstrap.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

 

Along with this, to add functionality to your website, you should have to include the following script tags before the </body> as well.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

 

You can toggle the Bootstrap Modal Plugin with below two options. 

  • Data attribute - Set data-toggle = "modal" to the toggle element. Along with it add data-target = "#idName" or href = "#idName" to target specific modal.
  • JavaScript - Use $('#idName').modal(options) to toggle the modal.

 

When we have the toggle element set, it's time to create a modal in the following way.

  • Create a <div> element with .modal class.
  • In it create a <div> with .modal-content class.
  • In this, create an additional three modal classes, .modal-header.modal-body.modal-footer, for adding a title, body, and footer of the modal, respectively.
  • Add different elements in the above three divs according to your needs. See the below example for additional details.

Working Example

<!-- Button trigger -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#idName">
    Modal Button
  </button>

  <!-- Modal -->
  <div class="modal fade" id="idName" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          This is a demo Modal.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

 

Output

Toggle button:

Modal:

 

Details of the above example

To see the modal window, we need some form of trigger in the form of a button or a link. We add the data-target = "#idName" attribute in the toggle element to target the modal we want to load on the window. Here is a list of classes used.

  • .modal - It helps to identify div element as a modal.
  • .fade - It adds fade in and out effect on the modal window.
  • aria-labelled by = "myModalLabel" - This attribute reference the modal title.
  • aria-hidden = "true" - This keeps the modal hidden until triggered.
  • .modal-header - It defines the style for the header of the modal window.
  • .modal-body - It set the style for the body of the modal window.
  • .modal-footer - It set the style for the footer of the modal window.
  • .close - It sets the style for the Close button.
  • data-dismiss = "modal" - Use it to close the modal window.
  • data-toggle = "modal" - Use it to open the modal window.
  • data-target=".bd-example-modal-lg" - Use it for a larger modal.
  • data-target=".bd-example-modal-sm" - Use it for a smaller modal.

Options

You can customize the look and feel of the Modal Window by using specific options that can pass via data attributes or JavaScript.

Name

Type/Default Value

Description

backdropboolean or the string 'static'/ trueIf you don't'' want the modal to close when the user clicks outside the modal, specify 'static' for a backdrop.
keyboardBoolean/trueCloses the modal when the user presses the escape key.
focusboolean trueIt emphasizes the modal when its initialized.
showboolean/trueIt shows the modal when its initialized.

 

Methods

Here is a list of methods used with modal().

  • .modal(options)

It activates content as a modal and accepts an options object.

$('#idName').modal({
  keyboard: true
})

 

  • .modal('toggle')

It manually toggles a modal and returns to the caller before the modal has been shown or hidden (i.e., before the revealed.bs.modal or hidden.bs.modal event occurs).

$('#idName').modal('toggle')

 

  • .modal('show')

It manually opens a modal. Returns to the caller before the modal shows (i.e., before the shown.bs.modal event occurs).

$('#idName').modal('show')

 

  • .modal('hide')

Manually hides a modal. Returns to the caller before the modal is hidden (i.e., before the hidden.bs.modal event occurs).

$('#idName').modal('hide')

 

  • .modal('handleUpdate')

It manually readjusts the modal's'' position if the height of a modal changes while it is open (i.e., if a scrollbar appears).

$('#idName').modal('handleUpdate')

 

  • .modal('dispose')

Destroys an element’s modal.

Events

We can use events to hook into a function for adding some functionality to the modal. Here is the list of them.

  • show.bs.modal - Fires after the show method calls.
  • shown.bs.modal - Fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
  • hide.bs.modal - Fires when the hide instance method calls.
  • hidden.bs.modal - Fires when the modal finishes hiding from the user.
$('#idName).on('event_name', function (e) {
  // do something...
})

Frequently Asked Questions

  1. What is Bootstrap?
    Bootstrap is a free & open-source CSS framework that aims to be a mobile-first front-end web development framework. It contains CSS & JavaScript-based interface components design templates like forms, buttons, navbar, and many more.
     
  2. What is Bootstrap Modal Plugin?
    The Bootstrap Modal Plugin component is a pop-up window displayed on the current page once the user triggers it. However, clicking on the modal's backdrop will automatically close the modal. Also, remember that Bootstrap doesn't support nested modals as they create a terrible UI experience for the user. Therefore, we display only one modal window at a time.
     
  3. What's the difference between modal and pop-up?
    The Modal Window loads on the parent window and prevents the user from clicking anywhere else on the screen other than the modal's content. Modal doesn't require any user action to open.  Modal Gives a callback when you close or open the modal.
    The pop-up window opens in a new window and doesn't return any callback once you close the pop-up. Pop-ups also require the user's action to allow a pop-up to open.

Key Takeaways

In this article, we learn how to use Bootstrap Modal Plugin in our projects and make our websites faster by the magic of templating and open source.

Also, check out our web development course and CSS course.

If you are preparing for your DSA interviews then, Codestudio is a one-stop destination. This platform will help you acquire effective coding techniques and overview student interview experience in various product-based companies.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think