CODEWITHSUNDEEP
javascripttwitter-bootstrap-3modal-dialog
jjspierx
jjspierx

Reputation: 440

Boostrap remote modal: Delay animation until after loading

I am using Bootstrap v3.3.0 with remote loaded modals. The remote modals are working fine, but I notice the fade effect is not as smooth as when a modal is pre-loaded with content instead of the remote loading that I am using. The AJAX call is very small for all of my modals, so I don't want/need a loading indicator or progress bar, I would just like to delay the fade animation until after the content has been remotely loaded (which is never more than a fraction of a second). Is there a way using javascript/jquery to specify the delaying of the fade-in animation until after the content has been loaded? Thanks in advance.

Upvotes: 0

Views: 350

Answers (1)

Shawn Taylor
Shawn Taylor

Reputation: 15740

You can add a delay with pure CSS:

.fade{
    -webkit-transition-delay: .5s;  // make this however long you need
    transition-delay: .5s;
  }

Also, if the vertical animation is a problem too, you can disable it with:

.modal.fade .modal-dialog {
    -webkit-transform: none;
    -o-transform: none;
    transform: none;

} }

Upvotes: 1

Related Questions