- 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 Event when the modal is about to be shown
The show.bs.modal event in Bootstrap fires when the modal is about to be displayed. Here, I have added a script to generate an alert −
<script> $(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("show"); }); $("#newModal").on('show.bs.modal', function () { alert('The modal will be displayed now!'); }); }); </script>
Above, on button click, the modal generates. After that, I have used the show.bs.modal event to generate an alert when the modal is just about to be visible.
The following is an example to demonstrate how to fire show.bs.modal event in Bootstrap when the modal is about to be displayed −
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>Team</h2> <p>The following is the result of the selections:</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 Players</h4> </div> <div class="modal-body"> <p>Tom and Jack selected in the team.</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>
Advertisements