Question

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

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

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

这很奇怪，因为示例窗口没有图形化的重量，JQuery应该规范化浏览器行为。我尝试在不使用JQuery的可拖动的情况下解决这个问题，但我遇到了同样的问题。

所以我有几个问题：

缓慢的性能是浏览器，JQuery，Bootstrap的错误还是我的代码不是最佳的？
为什么水平和垂直拖动之间存在差异？
我应该找到一种解决方法，还是仅仅为动态弹出窗口完全避免使用Bootstrap？

亲切的问候，吉

Answer 1

我找到了一些方法来解决这个问题。

将这个添加到CSS文件将在拖动模态时禁用transition效果。然而，似乎一旦用户拖动盒子，飞入将不会正确发生，而是它将会淡入。

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

Answer 2

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

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

Fiddle

Full screen demo

Answer 3

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

Answer 4

使用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的兼容性。

Answer 5

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

Answer 6

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

可拖动的JS Bootstrap模式 - 性能问题

6 个答案: