1

jQuery Mobile でいくつかのアラートを含むグローバル ポップオーバーを作成しようとしています。それは可能ですか？アクセスするには、ポップオーバーがjqueryモバイルページにある必要があるようです。そのページの外側のすべてが表示されていないためだと思います。

これが私が話していることの例です。2 番目のバージョンを機能させるにはどうすればよいですか?

作品

<div data-role="page" data-theme="a">
    <div data-role="content">

        <a href="#alert-popup" data-rel="popup" data-role="button" data-inline="true">Popup with close button right</a>

        <div data-role="popup" id="alert-popup" data-theme="c">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            <h1>Alert Title</h1>
            <p>
                Freegan thundercats raw denim adipisicing elit. 8-bit hella lomo do irony, sartorial aliquip wes anderson. Elit quinoa consectetur hoodie, bushwick 3 wolf moon godard eiusmod next level quis echo park. Keytar ullamco exercitation salvia, brunch before they sold out cray minim echo park polaroid vegan cliche reprehenderit vero synth. Artisan VHS fanny pack aliqua ex williamsburg duis. Reprehenderit chillwave skateboard post-ironic, food truck ethical est wes anderson letterpress incididunt master cleanse. Selvage farm-to-table elit vinyl jean shorts, consectetur delectus non banksy.
            </p>
        </div>

    </div>
</div>

動作しません

<div data-role="page" data-theme="a">
    <div data-role="content">

        <a href="#alert-popup" data-rel="popup" data-role="button" data-inline="true">Popup with close button right</a>

    </div>
</div>



<div data-role="popup" id="alert-popup" data-theme="c">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <h1>Alert Title</h1>
    <p>
        Freegan thundercats raw denim adipisicing elit. 8-bit hella lomo do irony, sartorial aliquip wes anderson. Elit quinoa consectetur hoodie, bushwick 3 wolf moon godard eiusmod next level quis echo park. Keytar ullamco exercitation salvia, brunch before they sold out cray minim echo park polaroid vegan cliche reprehenderit vero synth. Artisan VHS fanny pack aliqua ex williamsburg duis. Reprehenderit chillwave skateboard post-ironic, food truck ethical est wes anderson letterpress incididunt master cleanse. Selvage farm-to-table elit vinyl jean shorts, consectetur delectus non banksy.
    </p>
</div>
4

2 に答える 2

0

あなたは正しいです、ここを見てください：

ポップアップdivは、リンクと同じページ内にネストする必要があります。

<div data-role="page" data-theme="a">
    <div data-role="content">
        <a href="#alert-popup" data-rel="popup" data-role="button" data-inline="true">Popup with close button right</a>
    </div>
    <div data-role="popup" id="alert-popup" data-theme="c">
        <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <h1>Alert Title</h1>
        <p>
            Freegan thundercats raw denim adipisicing elit. 8-bit hella lomo do irony, sartorial aliquip wes anderson. Elit quinoa consectetur hoodie, bushwick 3 wolf moon godard eiusmod next level quis echo park. Keytar ullamco exercitation salvia, brunch before they sold out cray minim echo park polaroid vegan cliche reprehenderit vero synth. Artisan VHS fanny pack aliqua ex williamsburg duis. Reprehenderit chillwave skateboard post-ironic, food truck ethical est wes anderson letterpress incididunt master cleanse. Selvage farm-to-table elit vinyl jean shorts, consectetur delectus non banksy.
        </p>
    </div>
</div>

例

于 2012-10-03T17:35:00.337 に答える
0

残念ながら、現時点では、ポップオーバーは同じページまたは同じ data-role="page" div に存在する必要があります (1 つのファイルで複数ページのサイトを作成している場合)。これを回避するために、各ページにプレースホルダー ポップオーバーを配置し、サイトが読み込まれたときに (または必要に応じて、メニュー ボタンがクリックされるたびに) いくつかの JS を入力します。

以下は基本的な例です。ここで完全な詳細を取得できます (ユーザーが現在いるページのメニュー オプションを無効にする小さなスクリプトを含む: http://fromdehart.tumblr.com/post/35555011698/jquerymobile-included-マルチページサイトのポップアップメニュー

または、ここから GIT の完全なコードをダウンロードまたはフォークします: https://github.com/fromdehart/jQueryMobile-Included-Popup-Menus/

<!— Popup Placeholder —&gt;
<div data-role=“popup” id=“lMenu” data-overlay-theme=“a” class=“ui-content” data-position-to=“window”&gt;
    <a href=”#” data-rel=“back” data-role=“button” data-theme=“a” data-icon=“delete” data-iconpos=“notext” class=“ui-btn-right”&gt;Close</a>
    <!—create a list where we can populate the menu—&gt;
    <ul data-role=“listview” class=“leftMenu”&gt;</ul>
</div>

メニュー作成・投稿用JS

function leftMenu() {
  output = ””;
  //html for menu list items
  output += ‘&lt;li><a data-transition=”slide” href=”#home”&gt;Home</a></li>’;
  output += ‘&lt;li><a data-transition=”slide” href=”#taryn”&gt;Taryn</a></li>’;
  output += ‘&lt;li><a data-transition=”slide” href=”#flula”&gt;Flula</a></li>’;
  //write html into any items with the <ul> with the class of “leftMenu”
  $(‘.leftMenu’).html(output);
 //Targeting a class allows us to input the code in multiple places rather than an ID where it will only effect the first instance of that ID
}

HTML の body を閉じる前に戻り、menu 関数を呼び出します。

  <script type=“text/javascript”&gt;leftMenu();</script>
</body>
于 2012-12-19T16:36:06.653 に答える