16

I really like the Twitter Bootstrap modal, but showing it with the animation is a bit slow. I'd say around 500ms.

Is there a way to make it faster? I looked in bootstrap-modal.js but couldn't find anything compelling that could help.

And, I don't want to deactivate the animation completely because I've found out that it's a good trick to make response times seem faster in the eyes of the user ;o)

Pierre
  • 8,368
  • 4
  • 34
  • 50
  • Good question. In my case, the SPA I'm building makes extensive use of modals.. and their associated events `$('#myModal').on('shown.bs.modal', function () { .... }` to trigger other logic. When it comes time to unit test this stuff, I'd like to speed up the execution – bkwdesign Oct 31 '17 at 12:13

2 Answers2

9

You can manipulate the .fade class as explained here:
How can I change the speed of the fade for alert messages in Twitter Bootstrap?

Community
  • 1
  • 1
albertedevigo
  • 18,262
  • 6
  • 52
  • 58
  • 2
    Modifying .fade class based on that link answer is only for adjusting the background fading speed. The slide down and slide up speed seems to be unchanged. – Aryo Nov 29 '18 at 14:24
  • Except, if you remove the `fade` class entirely, then there is also no sliding animation done. – Jānis Elmeris Jan 14 '19 at 14:29
  • As @Aryo pointed out, modifying `.fade` will not affect the modal slide animation. There is another thread that shows how to solve this problem. See my answer below. – tipos Oct 04 '20 at 14:24
0

Slide animation can be changed by modifying .modal.fade .modal-dialog in bootstrap.css as suggested here: Modify Bootstrap Modal Transition

Quite late to the party, however this question is the first search result in google, and question hasn't really been answered. So, I thought this might help someone. Cheers!

tipos
  • 362
  • 1
  • 3
  • 13