Modal won't close on location change in single-page apps.

[mezerny]

Steps to reproduce: 1) Go to http://getbootstrap.com/javascript/#modals-sizes 2) Click on any modal example button (for example, Large Modal) 3) Change browser's URL to http://getbootstrap.com/javascript/#tabs wile modal is open and hit Enter

Actual result: Page is rendered with desired location, modal is still open.

Expected result: Modal is dismissed, page is rendered with desired location

In example above we can see the same page, but with one-page app frameworks, like AngularJS, these location change could lead to complete page rerender. Real-life use case is when user tries to perform some action inside modal without appropriate rights, it should be redirected to login page, but in that case, modal stays open.

[cvrebert]

Bootstrap doesn't impose or presume any form of client-side routing, so I think we'd be unlikely to do anything here. It should be fairly simple to add a hook into your router that detects and removes/closes the active modal (if any) before navigating to a different route.

[mezerny]

Well, anyway modal should block underlying page from any behavior, doesn't it?

[cvrebert]

We attempt to prevent the user from interacting with elements "underneath" the modal, if that's what you mean.

[mezerny]

Yes, that's why I assume, modal should be closed when route is changed. Otherwise it looks pretty strange, when page(route) is changed, but modal is still visible.

Another question is how can I close modal from my routing code, that doesn't have reference to modal instance (I'm using AngularJS).

[cvrebert]

If you're using Angular, I'd recommend https://github.com/angular-ui/bootstrap

[cvrebert]

$('.modal.in').modal('hide') should work in vanilla Bootstrap, although there might be some timing-related edge cases due to transition animations.

[mezerny]

Thank you, cvrebert, I will try that.

[cvrebert]

@fat Could you give a ruling on whether we want to do anything here?

[fat]

we don't want to do anything here

[fat]

that should be left to the user to close as you suggested :+1:

[mezerny]

Well, I think it is a bit difficult to find a way how to close dialog using Angular's wrapper. But probably it's possible, without awkward (in terms of Angular) solution:

$('.modal.in').modal('hide')

But I think it definitely should close by browser's 'back' button (which doesn't close modal at least in single-page apps)

[cvrebert]

I highly recommend you try Angular UI Bootstrap then.

[mezerny]

I use it already. It doesn't provide modal close on 'back' button. Angular's component is just a wrapper around bootstrap's modals, so it has absolutely the same behavior and issues.

[cvrebert]

Try filing a feature request with the Angular UI folks perhaps? I don't think "wrapper" is quite an accurate description; they don't use our JS.

[ssuryar]

Use setTimeout function to close the modal and redirect to the location

$scope.redirect = function(){$('#additem').modal('hide');
window.setTimeout (function() {
window.location.href = 'http://www.google.com';},1000);}

redirect = Function Name

additem = Modal ID

[pkozlowski-opensource]

For anyone using AngularJS integration I've posted an SO answer describing on how to close all opened modals on route change here: http://stackoverflow.com/a/23766070