9

对于工作中的项目，我们使用 JavaScript 中的 Bootstrap 模态窗口。我们想让一些窗口可以移动，但是我们遇到了 JQuery 的性能问题。

$("#myModal").draggable({
    handle: ".modal-header"
});

例如 ，
来源 。
在 IE9 中，它按预期工作。
在 Chrome 中，水平拖动按预期工作，垂直拖动相当慢但没有问题。
在 Firefox 中，水平拖动按预期工作，但垂直拖动非常慢。

这很奇怪，因为示例窗口在图形上并不繁重，而且 JQuery 应该规范浏览器行为。我尝试不使用 JQuery 的可拖动来解决这个问题，但我遇到了同样的问题。

所以我有几个问题：

  • 性能缓慢是浏览器、JQuery、Bootstrap 的错还是我的代码不是最优的？
  • 为什么水平和垂直拖动有区别？
  • 我应该找到解决方法，还是完全避免 Bootstrap 用于动态弹出窗口？

亲切的问候，圭多

4

6 回答 6

11

我找到了一些解决此问题的方法。

transition将此添加到您的 CSS 文件将在拖动模态时禁用效果。然而，似乎一旦用户拖动框，飞入将不会正确发生，而是只会淡入。

.modal.fade.ui-draggable-dragging {
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
}

或者，将以下内容添加到您的 CSS 文件和nofly模型中的类将一起禁用飞入，但不会禁用淡入：

.modal.fade.nofly {
    top: 10%;        
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
于 2013-06-17T18:44:28.380 回答
5

我发现在引导程序 3 中我必须覆盖模态对话框的这些 css 属性：

.modal
{
    overflow: hidden;
    bottom: auto;
    right: auto;
}
.modal-dialog{
    margin-right: 0;
    margin-left: 0;
}

小提琴

全屏演示

于 2013-09-17T12:48:35.937 回答
2

这并不能完全回答您的问题，但您可以尝试禁用*-transition属性或减少指定的时间值0.3s。这在 中定义.modal.fade。但这也会与最初的弹出动画混淆。如果这不可接受，您可以使用小部件的start事件draggable来应用新样式。

于 2013-05-04T20:11:34.880 回答
1

使用 Bootstrap 3.3 和 jQuery UI 1.1，我将一个名为“modal-draggable”的类添加到具有“modal”类的元素中。

它.modal-dialog使用类绑定到容器内的元素.modal-draggable（与此处绑定到实际容器的一些示例不同）。

有一些 CSS，因此滚动长对话框仍然适用于所有屏幕尺寸的设备。

CSS：

.modal-draggable .modal-backdrop {
  position: fixed;
}

.modal.modal-draggable {
    overflow: overflow-y;
}

.modal-draggable .modal-header:hover {
  cursor: move;
}

JavaScript：

$(".modal-draggable .modal-dialog").draggable({
  handle: ".modal-header"
});

请参阅此处的 JS Fiddle 以获取演示：http: //jsfiddle.net/jcosnn6u/3/

注意：到目前为止，我只在 Chrome、Firefox 和 Safari 以及移动设备上进行了测试，因此无法评论 Internet Explorer 的兼容性。

于 2015-03-16T15:54:41.283 回答
0

我更喜欢使用 jqueryui。有关可拖动 API 的更多详细信息：http: //api.jqueryui.com/draggable/

于 2014-12-23T11:55:39.600 回答
0

尽管建议的 CSS 更改对我有用，但我不喜欢最初显示在左侧的对话框。将 jquery UI 从 1.9 升级到 1.11 解决了我看到的问题

于 2016-12-19T21:23:47.430 回答