我可以使用带有 HTML5 全屏的 jQuery-UI 对话框吗？

Question

我一直在开发一个网络应用程序，除其他外，它使用 Google Maps API 来显示带有“大头针”标记兴趣点的区域地图。当用户点击 pin 时，应用程序使用 jQuery-UI Dialog 在对话框中显示有关点击 pin 的信息。

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

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

是否有一种实用方法使jQuery-UI对话框与HTML5全屏播放好？我已经在其他网站上看到了有关此的其他线程，但是我没有找到令人满意的答案。

Answer 1

默认情况下，插件会将您的对话框 <div> 附加到正文的末尾，这具有将其从您放置的位置删除的副作用。

使用.dialog 的appendTo 选项，您可以覆盖此行为：

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

其中"#parentElement" 是您的<div>，正在设置为全屏。