Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Bootstrap show.bs.modal Event
The show.bs.modal event in Bootstrap fires when the modal is about to be displayed.
Here the alert is set using the same event and when the model is ready to be displayed, the event fires. This results in dispaying the alert to the visitor.
With that, I have also set a button that clicks the modal to open as shown in the below code snippet −
$(document).ready(function(){
$("#button1").click(function(){
$("#newModal").modal("show");
});
$("#newModal").on('show.bs.modal', function () {
alert('The modal will be displayed now!');
});
});The following is an example to implement the show.bs.modal event in Bootstrap −
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Entrance Exams</h2>
<p>The following is the result of the entrance exam:</p>
<button type="button" class="btn btn-default btn-lg" id="button1">Result</button>
<div class="modal fade" id="newModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Selected Students</h4>
</div>
<div class="modal-body">
<p>Harry and Chris cleared the entrance exam.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#newModal").modal("show");
});
$("#newModal").on('show.bs.modal', function () {
alert('The modal will be displayed now!');
});
});
</script>
</body>
</html>
Updated on: 15-Jun-2020
5K+ Views
Advertisements