Question

我希望有人可以提供帮助！

我正在尝试为现有的jQuery / CSS站点添加bootstrap支持。除了实现bootstrap更改我必须修复的一堆格式化 - 它似乎正在影响我拥有的弹出式转换，似乎无法弄清楚。我希望你能帮忙，谢谢！

使用常规的jQuery / CSS（不是UI），我正在创建一个弹出的模态对话框。

在引导程序之前 - 它会在弹出框中“淡化”（即不透明度/ alpha）。但是，在添加引导程序.css / .js之后 - 现在它只是使背景变灰并完全不透明。

我该如何解决？

这是仅适用于css / jQuery的代码

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

然后我调用的jQuery弹出代码

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

这只适用于jQuery / css。

然而，只要我在标题中添加bootstrap .js / .css文件，完全相同的转换现在显示 no 不透明度（只是灰色的背景）。

有关如何修复的想法吗？

作为第二件事 - 我还注意到添加了引导程序文件，转换似乎是“波涛汹涌”，而不是我所拥有的“顺畅”。如果您对此也有所了解，那就太棒了！

非常感谢！

Answer 1

可能是引导转换规则产生了冲突，我记得使用版本4.0.0-alpha.6时，无法修改模型中高度的转换。

这些是模态转换的默认值（使用.fade类）

_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;
}

我认为这可以帮助你;

在各种组件上启用预定义转换

$enable-transitions: true (default) or false

Documentation bootstrap@4.0.0-alpha.6 /Customizing variables

很抱歉，如果bootstrap版本没有帮助，但它是我使用的唯一版本。

bootstrap / jQuery淡入淡出过渡不起作用

1 个答案: