Question

我有一个像这样的jQuery Mobile弹出框（参见下面的代码），并且需要为每个选项添加一个对话框，提示“你确定吗？”确定或取消：

（注意：我暂时删除了除第一个以外的所有选项以使代码更清晰）

<!--- Status, Suspend, Restore, Disconnect popup dialog box --->
<div data-role="popup" id="popupStatus" data-overlay-theme="a" data-theme="c"         
    style="max-width:500px;" class="ui-corner-all">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete"     data-iconpos="notext" class="ui-btn-right">Close</a>
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Status</h1>
    </div>
    <div data-role="content" data-theme="d" 
        class="ui-corner-bottom ui-content" data-backbtn="false">
        <h3 class="ui-title">Choose an Action:</h3>
        <a href="edit_ttStatus.cfm?id=<cfoutput>#rsTicketDetail.ttNum#</cfoutput>&id1=<cfoutput>#rsTicketDetail.sta#</cfoutput>" class="ui-corner-all" data-role="button" data-inline="false"  data-transition="flow" data-theme="b">Change</a> 
    </div>      
</div>

以下是Dialog的代码，但我不确定如何将其与上述代码“集成”：

<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
    <h3 class="ui-title">Are you sure?</h3>
    <p>This action will ________ the ticket.</p>
    <a href="#" class="ui-corner-all" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>    
    <a href="#" class="ui-corner-all" data-role="button" data-inline="true" data-transition="flow" data-theme="b">OK</a>  
</div>

Answer 1

您可以尝试以下解决方案。

请注意在帖子末尾提供完整的工作示例（代码+屏幕截图） ...

1 - 在弹出框myopt内的所有选项中添加一个类（例如： #popupStatus）。

另外两个选项（Validate和Cancel）的示例：

<div data-role="popup" id="popupStatus" data-theme="c" data-overlay-theme="a" style="max-width: 500px;">

    <!-- BACK BUTTON -->
    <a href="#" data-rel="back" data-role="button" data-theme="a"
        data-icon="delete" data-iconpos="notext" class="ui-btn-right">
        Close
    </a>

    <!--  HEADER -->
    <div data-role="header" data-theme="a">
        <h1>Status</h1>
    </div>

    <!-- CONTENT -->
    <div data-role="content" data-theme="d" data-backbtn="false">
        <h3>Choose an Action:</h3>

        <!-- OPTIONS -->
        <a href="#" class="myopt" 
            data-role="button" data-inline="false" data-theme="b">
            Change
        </a> 

        <a href="#" class="myopt" 
            data-role="button" data-inline="false" data-theme="b">
            Validate
        </a> 

        <a href="#" class="myopt" 
            data-role="button" data-inline="false" data-theme="b">
            Cancel
        </a>
    </div>
</div>

2 - 为您的弹出窗口定义ID属性（例如： #popup_option），该属性将提示消息{{1} }，并包含一个Are you sure?标记（例如：<span>），其中包含您要“整合”的动态消息（根据您从弹出式<span id="myoption"></span>中选择的选项）：

#popupStatus

3 - 为弹出框 <div data-role="popup" id="popup_option" data-theme="a" class="ui-corner-bottom ui-content" data-overlay-theme="a"> <div data-role="content"> <h3 class="ui-title">Are you sure?</h3>  <p>This action will <span id="myoption"></span> the ticket.</p> <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c"> Cancel </a> <a href="#" class="ui-corner-all" data-role="button" data-inline="true" data-transition="flow" data-theme="b"> OK </a> </div> </div>的选项定义以下点击事件功能：

#popupStatus

上述功能执行以下操作：

首先在弹出框$(".myopt").click(function() { var ind = $(this).index(); var toset = ""; switch(ind) { case 1: toset = "change"; break; case 2: toset = "validate"; break; case 3: toset = "cancel"; break; }; $("#myoption").html(toset); $( "#popupStatus" ).popup("close"); setTimeout( function(){ $( '#popup_option' ).popup( 'open', { transition: "flow" } ) }, 100 ); });中获取所单击选项的索引，并将其存储在变量#popupStatus中。如果点击选项ind，ind或1，2将等于3，Change或Validate ）。
变量Cancel是我们想要在弹出框toset内动态“集成”的内容，具体取决于我们之前在弹出框中点击的选项{{ 1}}。它最初设置为#popup_option。
从#popupStatus语句中，在代码中，我们将变量""的值设置为switch，toset或change ，取决于我们从弹出式validate中选择的选项。
我们在弹出式cancel内的#popupStatus标记中包含toset的{{1}}的值/内容<span>
我们关闭弹出式#popup_option并打开$("#myoption").html(toset);，其中包含动态生成的消息（#popupStatus，#popup_option或change）。
我们注意到我们需要使用validate函数打开弹出框cancel。您无法使用#popup_option直接打开它，因为不允许链接弹出窗口。

You can check the online doc which mentions the following：

该框架目前不支持弹出窗口的链接，所以它是   无法嵌入从一个弹出窗口到另一个弹出窗口的链接。所有   弹出窗口内的 data-rel =“popup”链接不会执行任何操作   所有

这也意味着自定义选择菜单在弹出窗口内不起作用，   因为它们本身是使用弹出窗口实现的。如果你放置一个   在弹出窗口中选择菜单，它将呈现为原生选择   菜单，即使您指定 data-native-menu =“false”。

使链接弹出窗口正常工作的解决方法是使用超时   绑定到调用弹出窗口的 popupafterclose 事件中的示例。在   以下示例，当第一个弹出窗口关闭时，第二个弹出窗口将关闭   通过延迟调用open方法打开：

完整示例：

setTimeout

测试屏幕截图：

打开页面：

点击上面显示的按钮后：

选择$( '#popup_option' ).popup( 'open', { transition: "flow" } );选项后：

希望这会有所帮助。如果您有任何问题，请告诉我:)。

添加JQM“你确定吗？”对话框提示我的Jquery Mobile PopUp框

1 个答案:

完整示例：