Question

我在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>

问题是，我不知道为什么它在加载时启动，某些属性触发它，有人能找到问题吗？谢谢

Answer 1

您的标记和代码存在一些问题：

首先，弹出窗口的标记看起来已经像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>

第二个弹出标记 should reside inside the same page as the link ，打开它。

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

第三次使用正确的jQM events来放置操纵内容的代码。

Forth 停止使用onclick和其他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;
});

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

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

根据您的标记，这里有jsFiddle 。正如您所看到的，弹出窗口不会自动弹出。有两个按钮显示如何以声明方式和编程方式打开弹出窗口。设置页面的内容会被正确注入和设置样式。

Jquery Mobile弹出窗口单独触发

1 个答案: