Bootstrap – Creating Modal PopUp

  • by
bootstrap-modal-delete-confirmation-dialog-pop-up

Bootstrap Modal is a light-weight, easy to use & implement pop-up dialog for HTML forms. It comes handy when we want to implement an alert message, Pop-Up message, confirmation dialog, etc. on our form. Here we will create three different Bootstrap Modals with different types. Modal plug-in automatically get displayed over the HTML form and makes body scroll disabled. Bootstrap Modal control body is divided into three parts :

  1. modal-header
  2. modal-body
  3. modal-footer

Also we can use different html tags inside each one of them according to our requirements. Here we will create Bootstrap Modal for

  • Delete Confirmation – A Simple Modal
  • Registration Form – A Large Modal 
  • Comment Box PopUp – A Smaller Modal

DOWNLOAD EXAMPLE


For showing Modals on our Page we will first include Bootstrap css and Javascript in our Head tag:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>

We can call Bootstrap Modal control from a HTML tag by setting data-toggle="modal" data-target="target-modal-id-or-class" . We will call both class and id with respective examples. And we can close the Modal-PopUp using data-dismiss="modal"

<!--Calling a normal Pop-Up modal-->
<button type="button" class="btn btn-light" data-toggle="modal" data-target=".user-registration">User Registration</button>
<div class="modal fade user-registration" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">User Registration</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<span>First Name:</span>
<input type="text" class="form-control"/>
<span>Last Name:</span>
<input type="text" class="form-control"/>

<span>Date of Birth:</span>
<input type="text" class="form-control"/>

<span>Country:</span>
<select class="form-control">
<option value="India">India</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="USA">USA</option>
<option value="Russia">Russia</option>
<option value="Australia">Australia</option>
</select>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>

This will create a simple Confirmation Pop-Up dialog box on our Form. Here we are calling the Modal using the ID parameter.

bootstrap-modal-delete-confirmation-dialog-pop-up

To create a larger Dialog we can set the class to modal-lg of our div. We will create a User Registration pop-up for this.

<!---Modal Call using the class--->
<button type="button" class="btn btn-light" data-toggle="modal" data-target=".user-registration">
User Registration
</button>
<!---Modal--->
<div class="modal fade user-registration" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">User Registration</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<span>First Name:</span>
<input type="text" class="form-control"/>

<span>Last Name:</span>
<input type="text" class="form-control"/>

<span>Date of Birth:</span>
<input type="text" class="form-control"/>

<span>Country:</span>
<select class="form-control">
<option value="India">India</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="USA">USA</option>
<option value="Russia">Russia</option>
<option value="Australia">Australia</option>
</select>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>

Press on User-Registration button to see Dialog.

And lastly we will create a small pop-up for entering the comments.

<!---Modal Call Comment box Small Dialog PopUp--->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".comment-box">
Comments
</button>
<!--Comment Dialog PopUp Modal-->
<div class="modal fade comment-box" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Enter your Comment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<textarea class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>

Press on Comment button to see Modal PopUp.

So Bootstrap modals are basically very simple to implement and attractive-looking, light-weight Pop-Up component.

DOWNLOAD EXAMPLE

Bootstrap-Modals.html:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>

<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>

<style>
body {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
}
.header {
background-color: #000;
width: 100%;
padding: 10px;
}
.header h3 {
color: #fff;
}
.container {
margin: 5px;
}
</style>
</head>
<body>
<div class="header">
<h3>Modal Example</h3>
</div>
<div class="container">

<div class="row">
<button type="button" class="btn btn-light" data-toggle="modal" data-target=".user-registration">
User Registration
</button>
&nbsp;&nbsp;
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delete-confirm">
Confirmation
</button>

&nbsp;&nbsp;
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".comment-box">
Comments
</button>
</div>

<div class="modal fade" id="delete-confirm" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<b>Confirmation</b>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Are you Sure to delete this item?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>

<div class="modal fade user-registration" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">User Registration</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<span>First Name:</span>
<input type="text" class="form-control"/>

<span>Last Name:</span>
<input type="text" class="form-control"/>

<span>Date of Birth:</span>
<input type="text" class="form-control"/>

<span>Country:</span>
<select class="form-control">
<option value="India">India</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="USA">USA</option>
<option value="Russia">Russia</option>
<option value="Australia">Australia</option>
</select>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>

<div class="modal fade comment-box" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Enter your Comment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<textarea class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>