Add global Twitter Bootstrap modal listeners

If you’re ever browsed the Twitter Bootstrap javascript documentation then you’ll know that the modal parts of the Bootstrap library require some javascript to show and hide them.

Part of the javascript is related to events which you can attach listeners to so you know when your modal shown and hidden.

What they don’t tell you is that you can add a single global (or semi global if you want) listener to all modal events which will fire when any modal is shown or hidden.

$('body').on('shown', '.modal', function () {
	console.log('we have shown a modal');

For example the above will console log “we have shown a modal” when any modal is shown. You can switch the shown event to be show, shown, hide or hidden.