如何删除自举程序的模态背景的淡入淡出

Question

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');
  }

Answer 1

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.

Answer 2

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'
 });

Answer 3

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 :))