2

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

有可能这样做吗？

任何其他喜欢的方法..我搜索所有 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>
4

1 回答 1

3

简短的回答是否定的，至少在 jQuery Mobile 版本 < 1.4 中不能这样做。弹出窗口必须是页面 DIV 的一部分，因此不能在页面之外访问。

还有另一种解决方案，您可以将第二页 div 替换为 data-role="popup" 并将其放在第一页 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 状态，这个功能仍然不能正常工作。

于 2013-09-07T12:49:12.187 回答