CODEWITHSUNDEEP
jquerytwitter-bootstrap
YPCrumble
YPCrumble

Reputation: 28692

How can I remove the fade out of bootstrap's modal-backdrop

I want to show the user a series of modals, not just one. My goal is to have the first modal fade in with a backdrop, and leave the backdrop up for the second and third modals without it fading out. The backdrop should then fade out after the third modal. Essentially I want the first modal to appear with the backdrop - then the second and third modals appear over the same backdrop as the first and second modals fade out. Then the third modal should disappear with the backdrop.

I've tried the following code, the modal remains, but the second backdrop won't fire as it seems it waits for the previous modal-backdrop to disappear before firing: 

  $('.modal-backdrop.fade').css({
    opacity: 0.8
  });

I then tried removing the 'fade' class from the backdrop but that doesn't work either.

The code that triggers the following modal is as follows:

  $modalOne.on('hidden', function (e) {
    $modalTwo.modal('show');
  }

Upvotes: 1

Views: 12339

Answers (3)

Vladimir Bozic
Vladimir Bozic

Reputation: 444

Check position relative on some element or z-index i had z-index: 0 on container element and this what cause the issue. (Designers can't live with them, can't leave without them :))

Upvotes: 0

Jules Lee
Jules Lee

Reputation: 83

Well based on the answer from Deryck, I was toying around it and came to this solution that worked for me.

 $('.modal-backdrop').css({
     'position': 'relative'
 });

Upvotes: 1

Deryck
Deryck

Reputation: 7658

I like to gamble.

 $('.modal-backdrop.fade').css({
     'background-color': 'rgba(0,0,0,0.8)'
 });

Give that a whirl - FYI this is to test a theory of mine. If it works, use this instead of opacity. The last digit in that set of 4 numbers is the alpha level (essentially its opacity). The others are red, green and blue of course.

Upvotes: 3

Related Questions