How to show bootstrap modal popup in center of screen?
May 24, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we walk through the complete process of creating a show bootstrap modal popup in center of screen.
The Bootstrap Modal plugin is a dialog box/popup window that is displayed on top of the current page. By default, the Bootstrap modal window is aligned to the top of the page with some margin. But you can align it in the middle of the page vertically by using CSS vertical-align property. We also can use JavaScript to centered the modal
Table of contents
- Includes bootstrap library
- Include the code in body
- Add JavaScript in
<script>tag
This article will guide you to adding show bootstrap modal popup in center of screen in Bootstrap with example.
Step 1: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>Step 2: Include the code in body
Include the code below in <body> to accept time from the user.
<h3 class="text-center">Bootstrap modal popup in center of screen</h3>
<div class="bs-example text-center">
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
<!-- Modal HTML -->
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>If you want change your doucument?</p>
<p class="text-primary"><small>If you don't save, your changes will be lost.</small></p>
</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>
</div> Step 3: Add JavaScript in <script> tag
Add the following JavaScript in <script> tag after the <body> tag to specify.
Applying the top margin on the modal to center it vertically, align the modal when displayed, and align the modal when the user resizes the window.
<script>
$(document).ready(function(){
function alignModal(){
var modalDialog = $(this).find(".modal-dialog");
// Applying the top margin on modal to align it vertically center
modalDialog.css("margin-top", Math.max(0, ($(window).height() - modalDialog.height()) / 2));
}
// Align modal when it is displayed
$(".modal").on("shown.bs.modal", alignModal);
// Align modal when user resize the window
$(window).on("resize", function(){
$(".modal:visible").each(alignModal);
});
});
</script>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Center Align Bootstrap Modal Vertically</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
function alignModal(){
var modalDialog = $(this).find(".modal-dialog");
// Applying the top margin on modal to align it vertically center
modalDialog.css("margin-top", Math.max(0, ($(window).height() - modalDialog.height()) / 2));
}
// Align modal when it is displayed
$(".modal").on("shown.bs.modal", alignModal);
// Align modal when user resize the window
$(window).on("resize", function(){
$(".modal:visible").each(alignModal);
});
});
</script>
</head>
<body>
<h3 class="text-center">Bootstrap modal popup in center of screen</h3>
<div class="bs-example text-center">
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
<!-- Modal HTML -->
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>If you want change your doucument?</p>
<p class="text-primary"><small>If you don't save, your changes will be lost.</small></p>
</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>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍
