Question

我正在尝试创建一个jquery移动对话框页面但是当我加载它时，即使我包含了属性对话框，它也是一个经典页面而不是对话框。错误在哪里？

<!DOCTYPE html>
<html>
<head>
    <title>Dialog Window</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
    <div data-role="dialog">
        <div data-role="header">
            <h1>Login</h1>
        </div>

        <div data-role="content">
            <h2>Hello World!</h2>
        </div>

        <div data-role = "footer">
            <h5>&copy; by Design</h5>
        </div>
    </div>
</body>
</html>

Answer 1

不确定你能做你想问的事。我认为jQM需要一个基页来导航回关闭对话框。这样的事情会起作用吗？

http://jsfiddle.net/phillpafford/vsw3r/5/

JS

$('#hiddenDialog').trigger('click');

HTML

<div data-role="page" id="home">
    <div data-role="header">
        <h1>Welcome</h1>
    </div>

    <div data-role="content">
        <h2>You are here</h2>
    </div>

    <div data-role = "footer">
        <h5>&copy; by Design</h5>
    </div>
    <a href="#loginDialog" id="hiddenDialog" data-rel="dialog" data-transition="pop" style="display:none;">Open dialog</a>
</div>

<div data-role="page" id="loginDialog">
    <div data-role="header">
        <h1>Login</h1>
    </div>

    <div data-role="content">
        <h2>Hello World!</h2>
    </div>

    <div data-role = "footer">
        <h5>&copy; by Design</h5>
    </div>
</div>

Answer 2

AFAIK你必须在显示页面时指定它（而不是在页面本身上）。

尝试将data-rel="dialog"应用于显示该页面的锚点： Dialogs - jQuery Mobile

使用jquery mobile创建一个对话框主页

2 个答案: