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>

第三，使用适当的jQM 事件来放置操作内容的代码。

Forth Stop using和jQM 的onclick其他事件属性。on*再次使用正确的 jQM 或 jQuery 事件。所以而不是

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

采用

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

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

第五注入 html 后，您需要调用trigger('create')父元素以让 jQM 增强和设置您注入的标记的样式。

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

这是基于您的标记的工作jsFiddle 。如您所见，弹出窗口不会自行弹出。有两个按钮显示如何以声明方式和编程方式打开弹出窗口。并且设置页面的内容被正确注入和样式化。

于 2013-03-02T05:18:00.783 回答