简体   繁体   English

单击JQuery中的按钮打开UI对话框

[英]Open an UI Dialog on click of a button in JQuery

My previous qstn in this forum was about assigning text dynamically to buttons in jquery dynamically and I got solution for that here. 我之前在这个论坛上的qstn是关于动态地将文本动态分配给jquery中的按钮,我在这里得到了解决方案。 Now my question is, upon clicking that button, I have to open another UI dialog with 2 buttons. 现在我的问题是,点击该按钮后,我必须打开另一个带有2个按钮的UI对话框。 I have written the following code. 我写了以下代码。 I am able to open UI Dialog but buttons are not appearing. 我能够打开UI对话框,但按钮没有出现。 Pls help me to alter my code. 请帮我改变我的代码。

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    </head>
    <body>
        <div id="selector" title="Pop Up" class = "selector"> <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span> Do u want to save the score?</p> </div>
        <script>
        var monthNames = ["January", "February", "March", "April", "May", "June",                    "July", "August", "September", "October", "November", "December"];
        var today = new Date();
        var month = monthNames[today.getMonth()];
        var nextMonth = monthNames[today.getMonth() + 1];

        $(".selector").dialog({buttons: [
                {
                    text: month,
                    click: function() {
                     $("#opener").dialog({modal: true, height: 590, width: 1005 });
                        $(this).dialog("close");
                    }
                },
                {
                    text: nextMonth,
                    click: function() {
                        $(this).dialog('close');
                    }
                }
            ]});

        </script>
        <script>

          $(".opener").dialog({buttons: [
                {
                    text: "ok",
                    click: function() {
                        $(this).dialog("open");
                    }
                },
                {
                    text: "cancel",
                    click: function() {
                        $(this).dialog('open');
                    }
                }
            ]});

    </script>

    <div id="opener" title="Pop Up" class = "opener" width ="100px"> 
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
    Score will be updated</p> </div>


</body>

Well, you have not specified any buttons to show in this line of code: 好吧,你没有在这行代码中指定任何按钮:

$("#opener").dialog({modal: true, height: 590, width: 1005 });

Maybe you wanted to intiliazie it like this, without opening: 也许你想像这样intiliazie,没有打开:

  // did you mean to select #opener or .opener??
  $("#opener").dialog({buttons: [
        {
            text: "ok",
            click: function() {
                $(this).dialog("open");
            }
        },
        {
            text: "cancel",
            click: function() {
                $(this).dialog('open');
            }
        },
        autoOpen: false
    ]});

And then just open it in the other line from the other dialog like this: 然后在另一行中打开它,就像这样:

$("#opener").dialog('open');

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM