blocks|key|584752|text|这并不完全回答您的问题，但您可以尝试禁用*-transition属性或从指定的0.3s中减少时间值。这是在.modal.fade中定义的。但这也会破坏最初的弹出式动画。如果这是不可接受的，您可以使用start小部件的draggable事件来应用新样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|584753|entityMap^0|K|C|13|4|1H|B|2R|5|30|9|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|G|$]]

This does not exactly answer your questions, but you may try to disable the <code>*-transition</code> properties or decreasing the time value from the specified <code>0.3s</code>. This is defined in <code>.modal.fade</code>. But this will mess with the initial pop-up animation too. If this is not acceptable, you may use the <code>start</code> event of the <code>draggable</code> widget to apply the new style.

blocks|key|584769|text|我找到了一些方法来解决这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|584770|将此添加到您的CSS文件将禁用transition效果，而该模式正在被拖动。然而，似乎一旦用户拖动框，苍蝇就不会正确地出现，而是只会淡入。|offset|length|style|CODE|584771|.modal.fade.ui-draggable-dragging+{
++++-moz-transition:+none;
++++-o-transition:+none;
++++-webkit-transition:+none;
++++transition:+none;
}|code-block|syntax|javascript|584772|或者，将以下内容添加到您的CSS文件和模型中的nofly类中，将禁用所有内容，而不是淡入：|584773|.modal.fade.nofly+{
++++top:+10%25;++++++++
++++-webkit-transition:+opacity+0.3s+linear;
++++-moz-transition:+opacity+0.3s+linear;
++++-o-transition:+opacity+0.3s+linear;
++++transition:+opacity+0.3s+linear;
}|584774|entityMap^0|0|F|A|0|0|N|5|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

I found a few ways to fix this.

Adding this to your CSS file will disable the <code>transition</code> effects while the modal is being dragged. It appears however that once the user drags the box the fly in will not occur correctly but rather it will just fade in.

<pre><code>.modal.fade.ui-draggable-dragging {
 -moz-transition: none;
 -o-transition: none;
 -webkit-transition: none;
 transition: none;
}
</code></pre>

Alternatively adding the following to your CSS file and the <code>nofly</code> class to your model will disable the fly in all together but not the fade in:

<pre><code>.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;
}
</code></pre>

blocks|key|2695263|text|我发现，在引导程序3中，我必须重写模态对话框的这些css属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2695264|.modal
{
++++overflow:+hidden;
++++bottom:+auto;
++++right:+auto;
}
.modal-dialog{
++++margin-right:+0;
++++margin-left:+0;
}|code-block|syntax|javascript|2695265|小提琴|offset|length|2695266|全屏演示|2695267|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/dave_wilton/a3gyq/5/|1|http://jsfiddle.net/dave_wilton/a3gyq/5/embedded/result/^0|0|0|0|3|0|0|0|4|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

I found that at bootstrap 3 I had to override these css properties of the modal dialog:

<pre><code>.modal
{
 overflow: hidden;
 bottom: auto;
 right: auto;
}
.modal-dialog{
 margin-right: 0;
 margin-left: 0;
}
</code></pre>

<a href="http://jsfiddle.net/dave_wilton/a3gyq/5/" rel="noreferrer">Fiddle</a>

<a href="http://jsfiddle.net/dave_wilton/a3gyq/5/embedded/result/" rel="noreferrer">Full screen demo</a>

blocks|key|2695308|text|我更喜欢使用jqueryui。更多关于可拖放API的详细信息：http://api.jqueryui.com/draggable/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2695309|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jqueryui.com/draggable/^0|V|Y|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I prefer using jqueryui. More detail about draggable API here: <a href="http://api.jqueryui.com/draggable/" rel="nofollow">http://api.jqueryui.com/draggable/</a>

blocks|key|2695337|text|使用Bootstra3.3和jQuery+UI+1.1，我将在元素中添加一个名为“”的类，并使用"modal“类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2695338|它使用.modal-dialog类绑定到容器中的.modal-draggable元素(与这里绑定到实际容器的一些示例不同)。|offset|length|style|CODE|2695339|有一些CSS，所以滚动长对话框仍然在所有屏幕大小的设备上工作。|2695340|CSS：|2695341|.modal-draggable+.modal-backdrop+{
++position:+fixed;
}

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

.modal-draggable+.modal-header:hover+{
++cursor:+move;
}|code-block|syntax|javascript|2695342|JavaScript：|2695343|$(".modal-draggable+.modal-dialog").draggable({
++handle:+".modal-header"
});|2695344|参见这里的JS+Fiddle以获得演示：+http://jsfiddle.net/jcosnn6u/3/|BOLD|2695345|注意:到目前为止，我只在Chrome、Firefox和Safari以及移动设备上测试了这一点，所以不能对Internet的兼容性发表评论。|2695346|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jcosnn6u/3/^0|0|3|D|O|G|0|0|0|0|0|0|0|K|L|V|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1D|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1E|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1F|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1G|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1H|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1I|8|@$D|1J|E|1K|F|W]]|9|@$D|1L|E|1M|1|1N]]|A|$]]|$1|X|3|Y|5|6|7|1O|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]]]

With Bootstrap 3.3 and jQuery UI 1.1 I'm adding a class called "modal-draggable" to the element with the "modal" class.

It binds to the <code>.modal-dialog</code> element inside containers with the <code>.modal-draggable</code> class (unlike some examples here which bind to the actual container).

There is some CSS so scrolling for long dialogs still work across devices of all screen sizes.

CSS:

<pre><code>.modal-draggable .modal-backdrop {
 position: fixed;
}

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

.modal-draggable .modal-header:hover {
 cursor: move;
}
</code></pre>

JavaScript:

<pre><code>$(".modal-draggable .modal-dialog").draggable({
 handle: ".modal-header"
});
</code></pre>

See the JS Fiddle here for a demo:
<a href="http://jsfiddle.net/jcosnn6u/3/" rel="nofollow">http://jsfiddle.net/jcosnn6u/3/</a>

NB: So far I have only tested this in Chrome, Firefox and Safari and mobile devices, so can't comment on Internet Explorer compatibility.

blocks|key|1906313|text|虽然建议的CSS更改对我有用，但我不喜欢最初显示在左边的对话框。将jquery从1.9升级到1.11修复了我看到的问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1906314|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Although the suggested CSS changes worked for me, I didn't like the dialog being shown on the left initially. Upgrading jquery UI from 1.9 to 1.11 fixed the issue I was seeing

For a project at work we use Bootstrap Modal windows in JavaScript. We would like to make some of the windows movable, but we are running into performance issues with JQuery.

<pre><code>$("#myModal").draggable({
 handle: ".modal-header"
});
</code></pre>

<a href="http://jsfiddle.net/nj6ST/show">Example</a> , 
<a href="http://jsfiddle.net/nj6ST/">Source</a> . 
In IE9, it works as expected. 
In Chrome, horizontal dragging works as expected, and vertical dragging is rather slow but not problematic. 
In Firefox, horizontal dragging works as expected, but vertical dragging is extremely slow. 

It's strange, because the example window is not graphically heavy and JQuery is supposed to normalize browser behavior. I tried solving this without using JQuery's draggable, but I ran into the same issue. 

So I have a couple of questions:

<ul>
<li>Is the slow performance the fault of the browser, JQuery, Bootstrap or is my code not optimal?</li>
<li>Why is there a difference between horizontal and vertical dragging?</li>
<li>Should I find a workaround, or just avoid Bootstrap altogether for dynamic popups?</li>
</ul>

Kind regards,
Guido

Draggable JS Bootstrap modal - performance issues

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

对于一个正在工作的项目，我们在JavaScript中使用Bootstrap窗口。我们想让一些窗口可以移动，但是我们遇到了JQuery的性能问题。$("#myModal").draggable({    handle: ".modal-header"});，。在IE9中，它按预期工作。在Chrome中，水平拖动按预期工作...

问可拖JS引导模式-性能问题
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可拖JS引导模式-性能问题EN