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

时间:2015-01-16 19:07:44

标签: html5 jquery-ui jquery-ui-dialog html5-fullscreen

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

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

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

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

1 个答案:

答案 0 :(得分:0)

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

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

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

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