在 MousePosition 中打开 JQuery Ui 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4552503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Opening JQuery Ui Dialog in MousePosition
提问by Shahin
i want to open JQuery UI Dialog In Mouse Position. what is the problem with my code?
我想在鼠标位置打开 JQuery UI 对话框。我的代码有什么问题？
<script type="text/javascript">
$(document).ready(function () {
var x;
var y;
$(document).mousemove(function (e) {
x = e.pageX;
y = e.pageY;
});
$("#d").dialog({
autoOpen: false,
show: "blind",
hide: "explode",
position: [x, y]
});
$("#c").bind("mouseover", function () {
$("#d").dialog('open'); // open
});
$("#c").bind("mouseleave", function () {
$("#d").dialog('close'); // open
});
});
</script>
回答by Nick Craver
Updating xand yafter they're passed (by value) to setupthe dialog won't have any effect, since the variables aren't related after that. You'll need to update the position option directly, like this:
更新x并y在（按值）传递它们以设置对话框之后将不会产生任何影响，因为之后变量不相关。您需要直接更新位置选项，如下所示：
$(document).mousemove(function (e) {
$("#d").dialog("option", { position: [e.pageX, e.pageY] });
});
You can test it out here, or the much more optimized version (since you only show it on top of #canyway):
你可以在这里测试它，或者更优化的版本（因为你只在上面显示它#c）：
$(function () {
$("#d").dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$("#c").hover(function () {
$("#d").dialog('open');
}, function () {
$("#d").dialog('close');
}).mousemove(function (e) {
$("#d").dialog("option", { position: [e.pageX+5, e.pageY+5] });
});
});
回答by Toninho
The answer of Nick Craver works, only need an improvement, in order to the box be always near the cursor.
Nick Craver 的答案有效，只需要改进，以使框始终靠近光标。
The Y-axis needs to be subtracted by the scrollTop of the page. So that line becomes:
Y轴需要减去页面的scrollTop。所以该行变为：
$("#d").dialog("option", { position: [e.pageX+5, (e.pageY+5)-$(document).scrollTop()] });
回答by Bob
$("#d").dialog(
"option",
{
position:
{
my: 'left',
at: 'right',
of: event
}
}
);
Working sample: http://jsbin.com/okosi4
工作示例：http: //jsbin.com/okosi4
This solution worked better for me when I had a long page that required scrolling. I found the above solutions didn't work well with vertical scrolling.
当我有一个需要滚动的长页面时，这个解决方案对我来说效果更好。我发现上述解决方案不适用于垂直滚动。
See more about position option
查看更多关于位置选项
