我可以在HTML5全屏幕上使用jQuery-UI Dialog吗？

Question

我一直在开发一个网络应用程序，除其他外，它使用Google Maps API显示一个区域的地图，其中包括＆＃34; pin＆＃34;标记兴趣点。当用户单击某个引脚时，该应用程序使用jQuery-UI Dialog在对话框中显示有关所单击引脚的信息。

后来，我决定用一个按钮让用户可以点击以使地图全屏显示。这对于地图来说没问题，但是当用户点击某个图钉时，除非他退出全屏模式，否则他无法看到该对话框。

这可能是因为持有对话框的div位于保存地图的全屏div之外。我尝试将持有对话框的div移动到包含地图的div内，但这也不起作用;显然，jQuery-UI将div移动到文档的末尾。

有没有一种实用的方法可以让jQuery-UI Dialog在HTML5全屏播放时表现得更好？我在其他网站上看到过关于此的其他帖子，但我还没有找到满意的答案。

Answer 1

默认情况下，插件会将对话框<div>附加到正文的末尾，这会产生副作用，无法将其从放置它的位置移除。

使用.dialog的{​​{3}}选项可以覆盖此行为：

$( "#yourDialog" ).dialog({
    appendTo: "#parentElement"
});

"#parentElement"是您的<div>全屏设置。