Question

这个完全让我难过。我调整了我的CSS，因此通过将起点和终点位置改为相同来定期引导模态只是淡入而不滑动：

.modal.fade.in {
    top: 50%;
}
.modal {
    top: 50%;
}

这导致了一个很好的逐渐出现。

我希望为Bootstrap Image Gallery创建的图库创建模式实现相同的效果，它扩展了bootstrap的modal.js。它可以找到here。虽然它在功能方面非常吸引人，但在本周的过程中，我使用js和css都无法简化过渡。对于我的生活，我无法弄清楚如何使每个图像淡入，但在适当的位置，而不是滑下或跨越，这真的是分散注意力。

我所能做的就是删除'淡入淡出'类以完全消除过渡。我本以为我为其他模态所做的css改变也会应用于画廊模态，但它们不是。我已经浏览了bootstrap.js的源代码，无法弄明白。我不是一个完整的润滑剂，但远非js / css专家，需要一只手。谢谢！

Answer 1

我会从Chrome开发人员工具或Firebug开始，了解您的CSS规则被覆盖的原因。在带有Chrome的Mac上，按住控件并在要检查的元素顶部时单击鼠标/滚动框（这将打开一个对话框，您将单击“检查元素”）。然后，这将打开开发人员工具，这些工具将以蓝色突出显示您单击的元素，在本例中为.modal-gallery。

我刚检查了这个模态库的源代码，并在CSS中注意到了这段代码在bootstrap.min.css：682：

.modal.fade.in {
   top: 50%;
}

通过bootstrap.responsive.css中的以下代码调整屏幕大小时可以覆盖

：10：

modal.fade.in {
  top: auto;
}

另一个建议是检查bootstrap-image-gallery.css文件，因为该库已应用了.modal-gallery类，而Twitter Bootstrap本身并不存在该类。

如何通过blueimp更改Bootstrap Image Gallery的动画？

1 个答案: