Bootstrap Modal Popup | How to create modal popup
Very simple way of creating Bootstrap Modal Popup. Included are the modal header, modal body (required for padding), and modal footer (optional).
They can be used to display alert message, images, and videos in a website. To trigger the modal popup, you’ll need to include a link or a button.
Below are the also example of Angular Bootstrap Popup.
To see a working modal popup demo by clicking the button below. It will slide down and fade in from the top of the page.
To Create Bootstrap Modal Popup it takes following steps:-
- Include the css and js file of bootstrap.
- Link the modal popup on which text or action point you want to open popup using button or anchor tag.
- Copy the enter popup code and paste inside the page bottom just above the js files.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>
OR
<a href="#!" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </a>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body text goes here.
</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>CSS
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Bootstrap JS -->
<script src="/bootstrap.min.js"></script>
<!-- Optional JavaScript -->
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})Example
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Bootstrap Modal Popup!</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal </button>
OR
<a href="#!" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </a>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body text goes here.
</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>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="jquery-3.3.1.slim.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>Optional sizes
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
< !--Vertically centered -->
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.You can customize this code further as per your requirement.