Table of contents

Introduction

Bootstrap Modal

Bootstrap Modal Classes

Bootstrap Modal Attributes

Plugins to Create a Modal

Working Example

6.1.

Example

6.2.

Output

Options

Frequently Asked Questions

8.1.

What is Bootstrap?

8.2.

What are the benefits of using Bootstrap?

8.3.

What is the Bootstrap Modal Plugin?

8.4.

How do I differentiate between a modal and a pop-up?

8.5.

What is the key difference between Bootstrap and CSS?

Conclusion

Last Updated: Mar 27, 2024

Easy

Bootstrap Modal Plugin

Author Gaurangi Tyagi

Introduction

Hello Ninja! If you use Bootstrap, you must’ve heard about the Modal plugins. The Javascript modal plugins of Bootstrap allow you to add dialog boxes to your website. This article will discuss the Bootstrap - Modal plugin in detail. We will talk about why it is a good idea to use modal plugins on a website and how they make the life of a developer easier.

Let us begin by learning about what "modal" is exactly.

Bootstrap Modal

A "Modal" is a child popup window/dialog box that floats above the parent window. It is used to provide additional information to the user without having to leave the parent window. You can use Bootstrap's modal plugin to add dialog boxes to your webpage for notifications, lightboxes, or custom content. They are created using Javascript, HTML, and CSS.
There are some important points about modals in Bootstrap that you need to keep in mind while using them. These are as follows:

Modals are placed above all other elements in the document. They remove the scroll from the <body>, allowing the content inside the modal to scroll instead.
If you click on the modal “backdrop,” the modal will close automatically.
Bootstrap does not allow the use of nested modal windows. That is because multiple modal windows can hinder the user experience.
The modal plugin uses position: fixed. This may cause a few problems on mobile devices.
Place your modal HTML at the top of the page whenever possible to avoid possible conflicts with other elements.
The autofocus HTML attribute has no impact in Bootstrap modals because of the way HTML5 defines its semantics. Put some customized JavaScript to use to get the same result:

$('#modalName').on('shown.bs.modal', function () {
	$('#userInput').trigger('focus')
})

Let us now look at the classes used in the bootstrap modal plugin.

Bootstrap Modal Classes

You may find the following classes while using the bootstrap modal plugin. The purpose of each of these is defined below.

Bootstrap Modal Class Name	Description
.modal	It is used to mark the contents inside the <div> as modal.
.modal-dialog	It is used to set the modal dialog box's width as well as its horizontal and vertical alignment.
.modal-content	The contents inside the <div> of this class are used to set the styles of the modal.
.modal-header	The style for the modal's header is specified using this class.
.modal-title	It contains the title of the modal
.modal-body	The content of the modal body can be added here.
.modal-footer	The style of the footer of the modal is defined here. Generally, buttons are added here.
.modal-sm	You can use this class to set the smallest size window for a modal.
.modal-lg	This class can be used to specify a large window for a modal.
.modal-xl	You can use this class to specify an extra large sized window for a modal.

Bootstrap Modal Attributes

You may see the following attributes in the Bootstrap modal plugins. Each of their functions is discussed in the table below.

Attributes	Description
data-bs-target="#idName"	It is used to specify which modal you want to trigger. It provokes the modal with the specified id.
data-bs-toggle="modal"	This attribute is used to toggle the modal.
data-bs-dismiss="modal"	It is an attribute generally used with a button to close the modal.

Let us now move further to learn about how to use the bootstrap modal plugin to create a modal.

Plugins to Create a Modal

Include the following link in your HTML code's <head> tag to start using bootstrap.

<!-- -- Bootstrap CSS CDN -- -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

To add more functionality, you should include Bootstrap’s precompiled Javascript to your website. Copy and paste the following script before the </body> tag.

<!-- -- Bootstrap JavaScript CDN -- -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

You can make a modal in the following way.

Create a <div> element with .modal class.
Inside it create a <div> with .modal-content class.
In this, create three additional modal classes, .modal-header, .modal-body & .modal-footer, for adding a title, body, and footer of the modal, respectively.
Add content in the above three div tags according to your requirements.

To toggle the contents inside a modal, you can choose either of the following two options.

Using Javascript: Use $('#idName').modal(options) to toggle the modal.
Using data attributes: On a control element like a clickable button, set the data-toggle = "modal" to toggle the modal at the click of the button. Along with it, add data-target = "#idName" or href = "#idName" to toggle a particular modal (with id = #idName).

You can use any name of your choice in place of idName. In the examples discussed further in this article, we’ve used the name modalExample.

Let’s look at some working examples to understand Bootstrap modals better.

Working Example

Example

Following is the example of a modal using bootstrap.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<title>Bootstrap Example</title>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="text-center">
		<img src="http://www.codingninjas.com/blog/wp-content/uploads/2020/04/LOGO-05.png" width="400">
		<div class="container center">
			<div class="row">
				<div class="col-md-12">
					<div class="modal fade" id="modalExample">
						<div class="modal-dialog modal-md">
							<div class="modal-content">
								<div class="modal-header">
									<h2>Hello Ninja!</h2>
								</div>
								<div class="modal-body">
									<p>
										This is a demo of bootstrap modal plugin.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-danger" data-bs-dismiss="modal">Exit</button>
								</div>
							</div>
						</div>
					</div>
					<button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#modalExample">Click here to see modal</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Output

Before clicking on the button:

After clicking on the button:

Options

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

Name	Type/Default Value	Description
backdrop	boolean or the string 'static'/ true	If you don’t want the modal to close when the user clicks outside the modal, specify 'static' for a backdrop.
keyboard	Boolean/true	It closes the modal when the user presses the escape key.
focus	boolean/ true	It emphasizes the modal when it's initialized.
show	boolean/true	It shows the modal when it's initialized.

For example, to change the backdrop of the modal to static and to close the modal by clicking the backdrop, you can use the following code:

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});

Now you can start working with Bootstrap modal plugins. It is now time to address some frequently asked questions.

Frequently Asked Questions

What is Bootstrap?

Bootstrap is a free and open-source CSS framework that aims to be a mobile-first front-end web development framework. It contains CSS and JavaScript-based interface components and design templates like forms, buttons, navbar, and many more.

What are the benefits of using Bootstrap?

Bootstrap provides a large variety of pre-styled components like buttons, forms, etc. It is used to create responsive designs without any effort. The pages made using Bootstrap components are faster and have more functionality.

What is the Bootstrap Modal Plugin?

The Bootstrap Modal Plugin component is like a pop-up window. It is displayed on the current page once the user triggers it.

How do I differentiate between a modal and a pop-up?

The Modal Window loads on the parent window and prevents the user from clicking anywhere else on the screen besides the modal's content. The pop-up window opens in a new window and doesn't return any callbacks once you close the pop-up.

What is the key difference between Bootstrap and CSS?

The key difference between Bootstrap and CSS is that Bootstrap is a front-end framework, while CSS is a style sheet language.

Conclusion

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

To learn more about Bootstrap, you can refer to the following articles.

You may refer to our Guided Path on Code Studios for enhancing your skill set on DSA, Competitive Programming, System Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Happy Learning, Ninjas!

Live masterclass

Master PowerBI using Netflix Data

by Ashwin Goyal, Product @ HRS Groups, Ex - Udaan, OYO

10 Sep, 2024

01:30 PM

305+ registered

View more events