How to get a bootstrap modal dialog box to fade away slowly

I have a modal dialog (#busyIndicator'), which basically says Please Wait. Sometime the operation completes way too fast so the dialog is essentially an epilepsy inducing blur between $("#busyIndicator").modal('show'); and $('#busyIndicator').modal('hide');.

Is there a nice way to hide the modal that introduces delay in the way it fades out? I tried $('#busyIndicator').fadeOut(2000).modal('hide');, but it doesn't seem to work.

Answers 1

  • Bootstrap modals fade by default, they have transitions setup in their css. However if you want to change the fade speed, use this;

    .fade {
        opacity: 0;
        -webkit-transition: opacity 1s linear;
        transition: opacity 1s linear;

    It should make fading way too slow, but then you can adjust the speed, by increasing the transition time from 1s to something smaller, like 30s.

Related Articles