Question

I’m displaying a simple Bootstrap modal with a ‘checkout’ button at the bottom.

On clicking the button I want to:

1. Close the modal, e.g. $(‘#myModal’).modal(‘hide’)
2. Wait until the animation is finished
3. Change window.location.href to my ‘checkout’
   page.

I can’t seem to find a way of chaining without it instantly running the next function, e.g.

$('#myModal').modal('hide').each(function() {
    window.location.href = '/checkout'; 
});

or I thought delay() might help, e.g.

$('#myModal').modal('hide').delay(1000).each(function() {
    window.location.href = '/checkout'; 
});

That doesn’t work either it just changes page instantly.

Is this a common jQuery issue? Or will I have to extend Bootstrap to handle this?

Answer 1

There’s an event called hidden when twitter bootstrap modal is completely hidden. So you can do something like this:

$('#myModal').bind('hidden', function(){
    window.location.href = '/checkout';
}).modal('hide');