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

Question

这个完全把我难住了。我调整了我的 css，因此通过将开始和结束位置更改为相同，常规引导模式只会淡入而不滑动：

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

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

我想对 Bootstrap Image Gallery 创建的图库模态实现相同的效果，它扩展了 bootstrap 的 modal.js。可以在这里找到。虽然它在功能方面非常吸引人，但在一周的时间里，我一直在使用 js 和 css，但都无法简化转换。对于我的生活，我无法弄清楚如何让每个图像淡入，而是在原地而不是向下或横向滑动，这确实令人分心。

我所能做的就是删除“淡入淡出”类以完全消除过渡。我原以为我为其他模态所做的 css 更改也会应用于画廊模态，但事实并非如此。我也浏览了 bootstrap.js 的源代码，无法弄清楚。我不是一个完整的 nube，但远非 js/css 专家，需要帮助。谢谢！

Answer 1

我会从 Chrome 开发者工具或 Firebug 开始，看看为什么你的 CSS 规则被覆盖。在装有 Chrome 的 Mac 上，当您位于要检查的元素顶部时，按住 Control 并单击鼠标/滚动框（这将打开一个对话框，您可以在其中单击“检查元素”）。然后，这将打开开发人员工具，其中将以蓝色突出显示您单击的元素，在本例中为.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 本身不存在的类。