CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptransitionfade
user6262902
user6262902

Reputation: 129

bootstrap/jQuery fade opacity transition not working

I am hoping someone can help!

I am trying to add bootstrap support to an existing jQuery/CSS site. Aside from realizing bootstrap changes a bunch of formatting that I have to fix - it seems to be affecting a popup transition I have, and can't seem to figure out. I hope you can help, thanks!

With regular jQuery/CSS (not UI), I am creating a modal dialog box that I popup.

BEFORE bootstrap - it would "fade" in the popup box (i.e., the opacity/alpha). However, AFTER adding the bootstrap .css/.js - now it just makes the background grey and totally opaque.

How do I fix it?

This is the code that works with just css/jQuery

<div class=sample-dialog>
  <div class=modal-overlay>
    <div class=modal-content>
      <div class=modal-body>
         random content
      </div>
    </div>
   </div>
</div>

then the jQuery popup code that I call

function showModal() {

var m = $('.sample-dialog');
var o = m.find('.modal-overlay');
var c = m.find('.modal-content');
var b = c.find('.modal-body');

m.css('display','block');

o.animate({'opacity':.8},350);
b.animate({'opacity':1,'margin-top':0},350,function() {
  c.css('overflow-y','auto');
});
}

This "works" with just the jQuery/css.

HOWEVER, as soon as I add the bootstrap .js/.css file in my header, the exact same transition now shows no opacity (just a grayed out background).

Any idea on how to fix?

As a second thing - I also notice with the bootstrap files added, the transition seems to be 'choppy' as opposed to the nice 'smooth' one I had. If you have insight for that too, that would be great!

Thanks very much!

Upvotes: 1

Views: 2434

Answers (1)

Enmanuel
Enmanuel

Reputation: 443

It may be that the rules of bootstrap transitions are creating conflict, I remember working with version 4.0.0-alpha.6 it was impossible to modify the transition of the height in a model.

These would be the default values ​​of the modal transition ( with the .fade class)

_transitions.scss

.fade.show {
    opacity: 1;
}
.fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    transition-property: opacity;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    transition-delay: initial;
}

This I think could help you;

Enables predefined transitions on various components

$enable-transitions: true (default) or false

Documentation [email protected] /Customizing variables

Sorry if the bootstrap version does not help, but it's the only version I've worked with.

Upvotes: 1

Related Questions