How can I use two twitter bootstrap modals in succession?

Question

This is a minor, subtle point, but in UX, subtlety makes all the difference.

I have crafted a 1-page web app using Twitter bootstrap. In one particularly important part of my application...

1. My user takes an action,
2. I present a Confirmation dialog (technically a bootbox confirm )
3. The user clicks OK to confirm
4. the modal disappears, an action via ajax takes place,
5. then I display a secondary modal (bootbox dialog) with a success message.

What I am trying to do is change step 4. I don't want the darkened overlay to disappear, only the dialog box itself. Instead, I would like to leave the background dimmed and display a spinner (spin.js of course) that will be replaced by the success modal upon ajax completion.

In short, I think I may need to override the default behavior of the success method of bootbox confirm.

Is this possible?

Answer 1

It should work if you listen for the close event on the first modal

$(document).on('close', '#firstModalId', function(){
  $('#secondModalId').modal('show');
});

You can also try the closed event. If timed right the user shouldn't see both at the same time and they shouldn't see one disappear when the other opens. Be careful of crashing IE when using two bootstrap modals at the same time.

One other possibility I've used is to open the second modal without a backdrop and at the same time changing the z-index of the first modal so it looks like it's gone. When the second modal closes you can either return the first modal to its original z-index or close it like normal. Whether you can take this route depends on whether or not you want the backdrop click behavior in the second modal.