带有 jquery mobile 的透明模态对话框答案

【问题标题】：trasparent modal dialogs with jquery mobile带有 jquery mobile 的透明模态对话框
【发布时间】：2011-10-28 13:12:40
【问题描述】：

我正在尝试使用 jquery mobile rc2 创建一个模式对话框。
这是我的代码：

<div id="info" data-role="page" data-fullscreen="true"> 
        <div data-role="content">
             Info
             <a data-role="button" data-rel="dialog" href="#dialog" >Dialog</a>
        </div>
</div>

<div id="dialog" data-role="page" data-fullscreen="true">
    <div data-role="content"> 
       <p>This is Page 2</p>
    </div>
</div>

如您所见，没有 javascript 代码，因为 jqm 应该自动处理此问题。

对话框看起来很漂亮，但背景变暗了。我只想在我的页面正常背景上显示对话框。我应该做些什么？甚至可能吗？我没有找到任何关于此的文档，但我认为这是一个很常见的问题...
可以的话请帮忙！

【问题讨论】：

我知道这不是你想要的，但也许它会让你想到替代方案：jsfiddle.net/UWEWA/8
好吧，这似乎是一个很好的解决方案，即使我猜不打算像这样使用 select ......即使我喜欢你的建议，如果其他人可以提供，我会等待更清洁的解决方案。同时，谢谢！
抱歉，在深入研究之后，您的解决方案对我不起作用，因为我有一个大约 10 个按钮的列表。每个按钮都必须打开用户可以使用的不同对话框。当我单击对话框时，选择/选项解决方案会消失，所以这对我不利。此外，当我尝试向选择添加更多选项时，它的行为有点奇怪。

标签： html jquery-mobile modal-dialog

【解决方案1】：

您可以使用 jquery ui 创建一个dialog，它可以是模态的，也可以不是模态的。我知道这不是您正在寻找的确切内容，但请尝试一下。

【讨论】：

【解决方案2】：

我认为你最好的选择可能是使用 actionsheet 插件：https://github.com/hiroprotagonist/jquery.mobile.actionsheet#readme

我发现它工作得相当好，希望他们能在未来的 jquery 移动版本中发挥作用。小心点击深色背景中的链接。我还没弄清楚如何用这个插件关闭它们。

【讨论】：

你知道这个插件是否呈现正确的数据主题属性吗？此外，从屏幕截图来看，它似乎错过了我迫切需要的标题

【解决方案3】：

经过长时间的深入搜索，我发现this question 与我的相似。即使它不能正确处理嵌套对话框，它也能解决问题。
希望jQuery Mobile团队能在正式发布前解决这个问题！

【讨论】：