How to trigger a modal using JavaScript in Bootstrap?
To show a modal in Bootstrap using JavaScript, use $('#myModal').modal('show');. To hide it, utilize $('#myModal').modal('hide');. These methods provide easy control over modal visibility, enabling dynamic display based on user actions or events, and enhancing user interaction and experience.
Syntax:
// Trigger modal display
$('#myModal').modal('show');
// Trigger modal hide
$('#myModal').modal('hide');
The table below illustrates the actions and their corresponding JavaScript code for manipulating modals in Bootstrap. These commands allow you to control the display and behavior of modals dynamically within your web application using JavaScript.
| Action | JavaScript Code |
|---|---|
| Show a Modal | $('#myModal').modal('show'); |
| Hide a Modal | $('#myModal').modal('hide'); |
| Toggle Visibility of a Modal | $('#myModal').modal('toggle'); |
| Trigger Modal Shown Event | $('#myModal').on('shown.bs.modal', function () { // Do something }); |
| Trigger Modal Hidden Event | $('#myModal').on('hidden.bs.modal', function () { // Do something }); |
Features:
- Enables dynamic display of models based on specific events or conditions.
- Enhances interactivity by allowing modal triggering through JavaScript.
- Provides flexibility in controlling modal behaviour programmatically.
- Compatible with jQuery and vanilla JavaScript.
- Easily integrates with other JavaScript functionalities to create dynamic user experiences.