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 :
- modal-header
- modal-body
- 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
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">×</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.
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">×</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">×</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.
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>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delete-confirm">
Confirmation
</button>
<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">×</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">×</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">×</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>