透明嵌套对话框 jquerymobile答案

【问题标题】：transparent nested dialogs jquerymobile透明嵌套对话框 jquerymobile
【发布时间】：2013-07-01 13:20:20
【问题描述】：

我正在尝试使用 jquery mobile rc2 创建一个模式对话框。
我设法摆脱了默认的丑陋灰色背景，现在对话框出现在创建它的页面上。您可以look here 知道如何做到这一点。问题是我有一个对话框，里面有一些<li> 元素，每个元素都会打开另一个对话框。第二个对话框不会在过去的对话框中打开。相反，我得到一个比灰色背景更难看的白色背景。
如何使嵌套对话框出现在具有透明背景的父对话框上？我应该在打开新对话框之前关闭第一个对话框吗？
您可以查看运行中的代码here。
提前致谢！

【问题讨论】：

标签： jquery jquery-mobile modal-dialog

【解决方案1】：

没有时间仔细研究它，但看起来它并不是真正的“额外”白色叠加层，而是#main 页面变得不可见并且背景的白色是实际上是身体元素。所以问题是为什么#main 变得不可见，我猜。希望这在某种程度上有所帮助=)

【讨论】：

【解决方案2】：

@cpak 是对的，即使他没有为问题提供任何解决方案。但是我确实按照以下步骤解决了问题：
1）向父页面添加一个.inactive类

.inactive
{
    display: block !important;
}

2) 当您打开任何子弹出窗口时，再次添加该类

3) 像这样编辑 .ui-dialog 和 .ui-dialo-overlay 类：

.ui-dialog
{
    background-color: rgba(34,34,34,0.25) !important;
}

.ui-dialog.ui-overlay-a 
{
    background-image: none;
}

4) 当您关闭最后一个弹出窗口时，删除 .inactive 类以恢复原始不透明度

希望这对某人有所帮助，但希望 jquery mobile 能进一步改变这种奇怪的行为！

【讨论】：

抱歉，我不再使用 jquery mobile，所以我无法测试 1.1.0 版
确实如此。请参阅我在答案中发布的链接以获取工作示例：)

【解决方案3】：

请参阅http://tqcblog.com/2012/04/19/transparent-jquery-mobile-dialogs/ 以获得完整的工作解决方案。它与 andreapier 解决方案的想法相同，但也提供了小的 jQueryMobile javascript 挂钩来绑定对话框的打开和关闭。

在最新的 jQueryMobile (1.1.0) 上运行良好。

我建议考虑为旧的移动浏览器删除不透明的花哨的 css 过渡。

【讨论】：