- Trending Categories
- 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
shown.bs.modal Bootstrap Event
The shown.bs.modal event in Bootstrap fires when the modal is completely displayed.
Here, on button click the modal would generate. The following is our button −
<button type="button" class="btn btn-default btn-lg" id="button1"> Result </button>
The following is the script to generate our modal on button click −
$("#button1").click(function(){ $("#newModal").modal("show"); });
Now the alert would generate using the shown.bs.modal event after the modal is visible to the visitors −
$("#newModal").on('shown.bs.modal', function () { alert('The modal is displayed completely!'); });
Here is the complete code to learn how to implement the shown.bs.modal Bootstrap event −
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 exams:</p> <button type="button" class="btn btn-default btn-lg" id="button1">Click for 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</h4> </div> <div class="modal-body"> <p>Rahul, Amit and Shweta cleared the 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('shown.bs.modal', function () { alert('The modal is displayed completely!'); }); }); </script> </body> </html>
Advertisements