使用jquery mobile的trasparent模态对话框

i'm trying to create a modal dialog with jquery mobile rc2.
This is my code:

我正在尝试用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>

As you can see there is no javascript code as jqm is supposed to handle this automatically.

正如你所看到的，没有javascript代码，因为jqm应该自动处理这个问题。

The dialog looks beautiful but the background goes dark. I want to show just the dialog over my page normal background. What am i supposed to do? Is it even possible? I didn't find any piece of documentationa about that, but it is a quite common problem i think...
Please help if you can!

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

3 个解决方案

#1

You can use jquery ui to create a dialog that can be either modal or not. I know this is not what you are searching for exactly but give it a try.

您可以使用jquery ui创建一个可以是模态的对话框。我知道这不是你正在寻找的东西，但试一试。

#2

I think your best bet might be to use the actionsheet plugin: https://github.com/hiroprotagonist/jquery.mobile.actionsheet#readme

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

I find it works fairly well and hopefully they'll role that into a future jquery mobile release. Be careful about clicking on links in the darkened background. I haven't figured out how to turn those off with this plugin.

我觉得它运行得相当好，希望它们能够成为未来jquery移动版的一部分。点击黑暗背景中的链接时要小心。我还没弄明白如何使用这个插件关闭它们。

#3

After long exaustive deeper search i found this question that is similar to mine. It solves the problems even if it does not handle nested dialogs correctly.
Hope jQuery Mobile team will solve this before official release!

经过长时间的深入搜索，我发现这个问题与我的相似。它解决了问题，即使它没有正确处理嵌套对话框。希望jQuery Mobile团队在官方发布之前解决这个问题！

#1