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 の一部である必要があり、ページの外からアクセスすることはできません。

別の解決策があります。2 番目のページの 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 をいじる必要があります。

他の解決策は、ポップアップをページ DIV の外に配置できる jQuery Mobile 1.4 を待つことです。これにより、複数のページ間でポップアップを共有できます。残念ながら、jQuery Mobile はアルファ版の状態であり、この機能はまだ正しく動作していません。

于 2013-09-07T12:49:12.187 に答える