Question

我想打开一个新页面作为弹出窗口。我谷歌但不能找到答案。

可以那么做吗？

任何其他类似的方法..我搜索所有Jquery移动文档。但是找不到任何东西。

这是我的代码::

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jquery Popup</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>
    <div data-role="page">
        <h1> Jquery Open Page in PopUp Examples</h1>

        <a href="#" id="open_popup" data-role="button" data-inline="true" data-rel="popup" data-transition="pop" data-position-to="window"> Open Page in PopUp </a>
    </div>

    <div data-role="page">
        <div data-role="Header">
            <p>
                PopUp
            </p>
        </div>

        <div data-role="content">
            <h2>
                Content Page ??
            </h2>

            <p>
                This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
            </p>
        </div>

        <div data-role="Footer">
            <a href="#" data-role="button" data-theme="b" data-inline="true"> Sounds Good </a>
            <a href="#foo" data-role="button" data-theme="c" data-inline="true"> Cancel </a>
        </div>
    </div>
 </body>
 </html>

Answer 1

简短的回答是否定的，至少在jQuery Mobile版本＆lt; 1.4。 Popup因为它必须是页面DIV的一部分，因此无法在页面外访问。

还有另一种解决方案，你可以用data-role =“popup”替换你的第二页div并将它放在第一页DIV中，它看起来像这样：

jsFiddle示例：http://jsfiddle.net/Gajotres/PMrDn/103/

HTML：

<div data-role="page">
    <h1> Jquery Open Page in PopUp Examples</h1>

    <a href="#popupExample" id="open_popup" data-role="button" data-inline="true" data-rel="popup" data-transition="pop" data-position-to="window"> Open Page in PopUp </a>
    <div data-role="popup" id="popupExample">
        <div data-role="header"class="ui-content">
            <p>
                PopUp
            </p>
        </div>

        <div data-role="content">
            <h2>
                Content Page ??
            </h2>

            <p>
                This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
            </p>
        </div>

        <div data-role="footer" class="ui-content">
            <a href="#" data-role="button" data-theme="b" data-inline="true"> Sounds Good </a>
            <a href="#foo" data-role="button" data-theme="c" data-inline="true"> Cancel </a>
        </div>
    </div>         
</div>

您需要使用CSS才能让它看起来更漂亮。

其他解决方案是等待jQuery Mobile 1.4，这将允许弹出窗口放在页面DIV之外，因此您可以在多个页面之间共享它。不幸的是，jQuery Mobile处于alpha状态，此功能仍无法正常工作。

Jquery Mobile：是否可以打开data-role =“page”作为Popup？

1 个答案:

HTML：