javascript - 单击复选框并单击还原按钮时如何打开 Jquery 对话框弹出窗口

标签 javascript jquery asp.net postback

我的代码有点像这样:

  function ShowPopUpRestore() {
        var returnval = 1;
        var hddnField = document.getElementById(<%=hdnSelectedRows.ClientID%>");
        if (hddnField.value != 0) {
            returnVal = 0;
           $('<div></div>').appendTo('body')
                                .html('<div><align="left"> </br>' + '<%= this.GetMessage("Msg1595")%>' + '</h6></div>')
                                .dialog({
                                    resizable: false,
                                    modal: true,
                                    title: "",
                                    height: 150,
                                    width: 475,
                                    buttons: {
                                        Yes: function () {
                                           // //__doPostBack(mDdlSurgeryListRE.name, '');

                                            $(this).dialog("close");
                                        },
                                        "No": function () {                                         

                                            $(this).dialog('close');
                                        }
                                    },
                                    close: function (event, ui) {
                                        $(this).remove();
                                    }
                                }).prev(".ui-dialog-titlebar").css("background", "#4E2D1D");
                            }                            
                    return false;
    }

假设我的一个数据处于挂起模式,我希望它处于事件模式,所以我试图通过单击恢复按钮来恢复它。 当我单击复选框并尝试单击恢复按钮时,弹出窗口应该带有"is"/“否”按钮:

  • 如果我单击"is",则选中的数据将恢复为事件模式。
  • 如果我点击“否”,那么它应该保持暂停模式。

它可以对多个复选框(数据)有效。谢谢。

最佳答案

这真的很简单,只需在 jQuery 中创建以下事件并将它们绑定(bind)以调用 ShowPopUpRestore():

  1. 为恢复按钮创建一个 click() 事件。
  2. 为复选框创建一个 change() 事件。

完整示例:

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
    <script type="text/javascript">
        $(function () {

            $("#btnRestore").click(function () {
                ShowPopUpRestore();
            });

            $("#chkBtn").change(function () {
                ShowPopUpRestore();
            });

            function ShowPopUpRestore() {
                var returnval = 1;
                var hddnField = document.getElementById("<%=hdnSelectedRows.ClientID%>");
                if (hddnField.value != 0) {
                    returnVal = 0;
                    $('<div></div>').appendTo('body').html('<div><align="left"></br>' + '<%= this.GetMessage("Msg1595")%>' + '</h6></div>')
                                    .dialog({
                                        resizable: false,
                                        modal: true,
                                        title: "",
                                        height: 150,
                                        width: 475,
                                        buttons: {
                                            Yes: function () {
                                                $(this).dialog("close");
                                                alert('You clicked YES');
                                            },
                                            "No": function () {
                                                $(this).dialog('close');
                                                alert('You clicked NO');
                                            }
                                        },
                                        close: function (event, ui) {
                                            $(this).remove();
                                        }
                                    }).prev(".ui-dialog-titlebar").css("background", "#4E2D1D");
                }
                return false;
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" id="btnRestore" value="Restore" />
        <input type="checkbox" id="chkBtn" value="Check box" />
        <asp:HiddenField ID="hdnSelectedRows" runat="server" Value="1" />
    </form>
</body>

关于javascript - 单击复选框并单击还原按钮时如何打开 Jquery 对话框弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38692564/

相关文章:

javascript - 如何从用户脚本中使用 Freebase 的建议脚本?

javascript - 嵌套 $(document).ready()

javascript - JQuery 没有从多个 .on() 调用中读取?

javascript - 如何根据通过函数传递的参数更改 Jquery 选择器

asp.net - 如何更改ASP.NET图表控件的背景颜色?

javascript - 是否可以让其他 javascript 事件监听器等待异步事件?

javascript - react Hook : Handling Objects as dependency in useEffects

jquery - 使用可排序如何禁止特定类别的项目移动到特定列表

c# - 练习web.config 报错

asp.net - 在 ASP.NET MVC 中使用/Owin 授权静态文件