How to close all active bootstrap modals on session timeout?

Question

I need to make a call when the user is idle and passes the session time out that will close all Bootstrap modals. The modals being active are dependent on what the user is doing at the time so I would like to do something that's is all encompassing.

I tried:

$('.modal').modal('toggle');

When the time out occurs but my modals are still there.

Colous

Answer 1

Use the following code:

$('.modal').modal('hide');

Also if you would like to do something if the modal is hidden then you can do this:

$('.modal').on('hidden', function () {
  // write your code
});

Kerstin

..because using toggle will show your hidden modals and hide your shown modals. – Lewendal

But as he mentioned that if some modals are open and some are close then it might cause some problem. so its better to use the better safe code. – Kerstin

I was stating the reason for your answer, as I agree and you hadn't included the reason. – Lewendal

Slightly better: $('.modal.in').modal('hide'). No need to target the closed modals. – Wert

Answer 2

The correct answer is missing something vital.

$('.modal').modal('hide') // closes all active pop ups.
$('.modal-backdrop').remove() // removes the grey overlay.

The second line is vital if you want the users to use the page as normal.

Crowfoot

$('.modal').modal('hide') works fine for me on its own (bootstrap 3). You're possibly confusing this with jQuery's hide() function, which would hide the modal div, leaving the grey background in place. In which case you would need to call $('.modal-backdrop').remove() afterwards. – Birck

@Birck No. This is when you're working with multiple modals. If you close the outer modal without closing the inner one, the grey overlay makes the page unusable. – Purslane

This works for me especially when you set backdrop on modal – Simplicidentate

Answer 3

Try this way : $('.modal.in:visible').modal('hide');

Dissimilitude

Answer 4

Using vanilla JS you can do the following

// import all your dependencies
import * as bootstrap from "bootstrap"

// close all modals but the one you want to open
const $modals =  document.querySelectorAll('.modal')
$modals.forEach(modal => {
  let currentModal = bootstrap.Modal.getInstance(modal)
  if (currentModal) currentModal.hide()
})

Cutler

Answer 5

This is how i got it working in my project without using any factory or additional code.

//hide any open bootstrap modals
  angular.element('.inmodal').hide();

I have a timeout function that emits logout as $rootScope.$emit('logout'); and the listener in my service is as follows:

$rootScope.$on('logout', function () {                    
                    //hide any open bootstrap modals
                    angular.element('.inmodal').hide();

                    //do something else here  

                });

If you want to hide any other modals such as angular material dialog ($mdDialog) & sweet alert dialog's use angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();

I don't know if this is the right approach , but it works for me.

Heroin

Answer 6

When I dont know, wich Modal is open, I use the following for me...

$('.modal[id^="modal_"]').modal('hide');

Halve