Jquery mobile 添加一个JQM“；你确定吗？”；对话框提示我的Jquery手机弹出框

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

（注意：我临时删除了所有选项，除了第一个使代码更干净的选项）

地位
选择一个操作：

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

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

你确定吗？
此操作将删除票证

您可以尝试下面的解决方案

请注意，本文末尾提供了完整的工作示例（代码+屏幕截图）

1-在弹出框

#popupStatus

中的所有选项中添加一个类（例如：

myopt

）

还有两个选项（

Validate

和

Cancel

）的示例：

3-为弹出框的选项定义以下单击事件函数

#popupStatus

：

<!-- POPUP BOX - FOR OPTIONS -->
<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>

        <!-- INLCUDE THE SPAN TAG -->
        <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>

$(".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

  中<如果（分别）单击了

  更改

  、

  验证

  或

  取消

  选项，则code>ind将等于

  1

  、

  2

  或

  3

• 变量

  toset

  是我们希望在弹出框

  #popup_选项

  中动态“集成”的内容，具体取决于我们之前在弹出框

  #popupStatus

  中单击的选项。它最初设置为

  ”

• 从

  开关

  语句中，在代码中，我们将变量

  的值设置为
  更改
  ，
  验证
  ，或
  取消
  ，具体取决于我们从弹出的
  #popupStatus
  中选择的选项
  

• 我们在带有

  $（“#myoption”）.html（toset）的弹出式
  #popup_选项
  中的
  标记中包含
  toset
  的值/内容
  

• 我们关闭弹出窗口

  #popupStatus

  并打开包含动态生成消息（

  更改
  ，
  验证
  ，或
  取消
  ）的
  弹出窗口
  。
  
  我们注意到需要使用
  setTimeout
  功能打开弹出框
  #popup_选项
  。您不能使用
  $（'#popup_option'）直接打开它，因为不允许链接弹出窗口
  

:

该框架目前不支持弹出窗口链接，因此 无法将链接从一个弹出窗口嵌入到另一个弹出窗口。全部的 在弹出窗口中带有数据rel=“popup”的链接在任何时候都不会起任何作用 全部

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

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

---

完整示例：

$（函数（）{
$（“.myopt”）。单击（函数（）{
var ind=$（this.index（）；
var toset=“”；
开关（ind）{
案例1：
toset=“变更”；
打破
案例2：
toset=“验证”；
打破
案例3：
toset=“取消”；
打破
};
$（“#myoption”）.html（toset）；
$（“#popupStatus”）。弹出（“关闭”）；
setTimeout（function（）{$（'#popup_option'）.popup（'open'，{transition:“flow”}），100）；
});
});
地位
选择一个操作：
你确定吗？
此操作将删除罚单

测试截图：

打开页面：

单击上面显示的按钮后：

选择选项

验证后

：

---

希望这有帮助。如果您有任何问题，请告诉我：）。

Littm，感谢您提供的详细而有价值的帖子。。结果很好！一个问题：-有时当我浏览主页时，“弹出”部分显示在页面底部？-通常情况下，它们应该保持隐藏状态，直到调用？-如果我再次刷新页面，它们会消失吗？我以前遇到过这个问题，在调用..@jli之前不知道如何保持“隐藏的div”不可见

<!-- POPUP BOX - FOR OPTIONS -->
<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>

        <!-- INLCUDE THE SPAN TAG -->
        <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>

$(".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 );
});

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no' />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

        <script>
            $(function() {

                $(".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 );

                });
            });
        </script>
    </head>

    <body>

        <!-- YOUR JQUERY MOBILE PAGE -->
        <div data-role="page" id="my_page">
            <div data-role="content">
                <a href="#popupStatus" data-role="button" data-rel="popup" data-position-to="window"> Open
                    Status, Suspend, Restore, Disconnect popup dialog box 
                </a>

                <!--- Status, Suspend, Restore, Disconnect popup dialog box --->
                <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>


                <!-- POPUP BOX - FOR OPTIONS -->
                <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>

            </div><!-- content -->
        </div><!-- page -->

    </body>
</html>