loading words...

Mar 26, 2019 17:05:04

Events In Bootstrap

by @valentino | 209 words | 60🔥 | 358💌

Valentino Urbano

Current day streak: 60🔥
Total posts: 358💌
Total words: 170604 (682 pages 📄)

Most components in bootstrap fire an event when dismissed. You can intercept the event and act accordingly. For this project, I was using jquery sp this example will be based on that, but it is quite easy to convert it to vanilla js (or the framework of your choosing).

The main problem when approaching this is that the official bootstrap documentation on the topic is wrong. It said that you need to look for the "closed.bs.alert" event, but it never gets fired. Instead, you should listen for the "close.bs.alert" event. The same thing applies to most events in bootstrap.


For an alert (toast):


$(document).on("close.bs.alert", function() {

console.log("dismiss toast");

//do something

});


For a modal:


$(document).on("close.bs.modal", function() {

console.log("dismiss modal");

//do something

});


On top of the close event that gets fired when you press on an "X" you can also listen to show and hide events which are more useful for something like a tooltip:


$(document).on("hide.bs.tooltip", function() {

console.log("dismiss tooltip");

//do something

}) ;


Most components in bootstrap will fire these events:

- show

- shown

- hide

- hidden


On top of these, some components have their own custom events specifically for them. For example, the components that have a close button will fire the close event as shown above

Originally published at www.valentinourbano.com

contact: email - twitter / Terms / Privacy