0

次のように、index.html にポップアップを設定しました。

<!-- Choice Popup -->
<div class="ui-popup-screen ui-overlay-a ui-screen-hidden" id="popupDialog-screen"></div>
<div data-role="popup" class="ui-popup-container ui-overlay-a" data-transition="pop" id="choicePopup">
    <div data-role="popup" id="choicePopup" data-overlay-theme="b" data-theme="c" data-dismissible="false" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="slidedown" data-position-to="window" data-arrow="true" data-arrow-sides="t,b,l,r">
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
             <h1 class="ui-title" role="heading" aria-level="1">Your decision has been made:</h1>

             <h2 align="center" id="choice-p"></h2>
               <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-inline">
                    <span class="ui-btn-inner">
                        <span class="ui-btn-text">Thanks</span>
                    </span>
               </a>
               <a href="#" onclick="eatsome('Food'); return false;" data-role="button" data-inline="true" data-transition="flow" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-inline">
                    <span class="ui-btn-inner">
                        <span class="ui-btn-text">Again!</span>
                    </span>
               </a>
        </div>
    </div>

問題は、読み込み時に起動する理由がわかりません。何らかの属性がそれを引き起こしているのですが、誰でも問題を見つけることができますか? ありがとうございました

4

1 に答える 1

2

マークアップとコードにはいくつかの問題があります。

まず、ポップアップのマークアップは、ブラウザーの開発者ビューからコピーされたように、既に jQM 拡張されているように見えます。したがって、最初にそれを正常にします。次のように見えるかもしれません

<div data-role="popup" id="choicePopup" data-overlay-theme="b" data-theme="c" data-dismissible="false" class="ui-corner-all">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1></h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
        <h3 class="ui-title">Your decision has been made:</h3>
        <a id="btnThanks" href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Thanks</a>
        <a id="btnAgain" href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Again!</a>
    </div>
</div>

次に、ポップアップ マークアップは、それを開くリンクと同じページ内に存在する必要があります。

<div data-role="page" id="main">
    ...
    <div data-role="popup" id="choicePopup">
        ...
    </div>
</div>

3 番目に、適切なjQM イベントを使用して、コンテンツを操作するコードを配置します。

Forthonclickやその他のon*イベント属性を jQM で使用するのをやめる。もう一度、適切な jQM または jQuery イベントを使用してください。だから代わりに

<a href="#" onclick="eatsome('Food'); return false;" ... >Again!</a>

使用する

<a id="#btnAgain" href="#" ... >Again!</a>

$("#btnAgain").click(function(){
    eatsome('Food'); 
    return false;
});

第 5に、 html を注入した後trigger('create')、親要素を呼び出して、注入したマークアップを jQM で拡張およびスタイル設定できるようにする必要があります。

var content = '<form>;
...
content += '</form>;
$("div.settings-content").html(content).trigger("create");

ここでは、マークアップに基づいてjsFiddleを実行しています。ご覧のとおり、ポップアップは単独ではポップアップしません。ポップアップを宣言的およびプログラム的に開く方法を示す 2 つのボタンがあります。また、設定ページのコンテンツが挿入され、適切にスタイル設定されます。

于 2013-03-02T05:18:00.783 に答える