How to adjust the delay of the opening of a Bootstrap modal?

Question

I am using gem "bootstrap-sass", "~> 2.3.0.0", which means that I am using Bootstrap 2. The modal is documented here.

My own modal starts like this:

#Modal.modal.hide.fade{"aria-hidden" => "true", "aria-labelledby" => "jobsModalLabel", :role => "dialog", :tabindex => "-1"}

I open my modal like this:

$("#Modal").modal().css "margin-left": ->
        -($(@).width() / 2)

I would like to have it load faster, but I can't read from the documentation how to control the delay time. I have tried to remove the .fade class from my modal, but that speeds to loading up too much. So I need to keep the fade functionality, but just make it faster.

Not sure if this is a js or css problem. I suppose it can be solved both ways, but I don't know how.

When I overwrite my .fade class with the below, my fading does not speed up:

.fade {
   opacity: 0;
   -webkit-transition: opacity 0.01s linear;
      -moz-transition: opacity 0.01s linear;
       -ms-transition: opacity 0.01s linear;
        -o-transition: opacity 0.01s linear;
           transition: opacity 0.01s linear;
}

If I increased to e.g. 3.00s, it slows down though...

It seems like .fade has to do with the process of adding backdrop. I wish to speed up the process of the modal traveling from the top of the screen to its final position. This process happens after the backdrop is added.

You can manipulate the .fade class as explained here: [http://stackoverflow.com/questions/10441281/how-can-i-change-the-speed-of-the-fade-for-alert-messages-in-twitter-bootstrap][1] [1]: http://stackoverflow.com/questions/10441281/how-can-i-change-the-speed-of-the-fade-for-alert-messages-in-twitter-bootstrap — Warren Reilly, Feb 13 '14 at 12:44
Thanks, but my problem has to do with the "second part" of the modal creation. Check out my updated question. — Cjoerg, Feb 13 '14 at 13:00

score 0 · Accepted Answer · answered May 08 '20 at 22:36

In bootstrap v3 (I happen to be on v3.4.1), you can edit modal.js (or if you have an aggregated bootstrap.js, you can find the modal section marked by a // MODAL CLASS DEFINITION header) to accomplish what you're trying to do.

Change Modal.TRANSITION_DURATION and Modal.BACKDROP_TRANSITION_DURATION to something really low, like 0 or 1 --

  ...
  Modal.TRANSITION_DURATION = 1
  Modal.BACKDROP_TRANSITION_DURATION = 1
  ...

Then the transitions will occur as instantaneously as possible.

Here's a link to the source code I'm referring to -- https://github.com/twbs/bootstrap/blob/v3.4.1/js/modal.js#L39

How to adjust the delay of the opening of a Bootstrap modal?

1 Answers1