Site icon ParallelCodes

Bootstrap – Creating Modal PopUp

ASH

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

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.

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>

Exit mobile version