如何使用jquery对话框实现“确认”对话框?

时间:2016-07-19 16:02:34

标签: jquery gridview modal-dialog

我有一个gridview,每行都有一个删除按钮。当用户单击删除按钮时,我想使用jquery .dialog()弹出确认对话框。以下是我的代码。但不知何故,确认对话框没有显示。任何人都可以帮我查看遗失/错误的内容吗?

<asp:GridView ID="gvInactiveMerchants" runat="server" EnableTheming="False"
        AutoGenerateColumns="False" DataKeyNames="Key" AllowPaging="True" 
        PageSize="20" CssClass="display records pointerrow"  
        onrowcommand="gvInactiveMerchants_RowCommand"
        PagerSettings-Mode="NumericFirstLast" 
        onpageindexchanging="gvInactiveMerchants_PageIndexChanging" 
        ClientIDMode="Static">
        <RowStyle CssClass="odd" />
        <AlternatingRowStyle CssClass="even" />
        <PagerStyle CssClass="pager-row" />
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>                
                <asp:Button ID="btnDelete" Text="Exclude" CssClass="DeleteButton" CommandArgument='<%# Eval("MID") %>' CommandName="DeleteRow" runat="server" OnClientClick="return myConfirm('Are you sure you want to exclude this merchant?');" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Field1" HeaderText="Field1" />
        <asp:BoundField DataField="Field2" HeaderText="Field2" />
    </Columns>
    </asp:GridView>


myConfirm = function (msg) {
            $("<div>are you sure?</div>").dialog({
                resizable: false,
                height: 140,
                modal: true,
                title: "alert",
                buttons: {
                    "Yes": function () {
                        $(this).dialog("close");
                        return true;
                    },
                    "No": function () {
                        $(this).dialog("close");
                        return false;
                    }
                }
            });
        }

   protected void gvInactiveMerchants_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        try
        {
            if (e.CommandName == "DeleteRow")
            {
                ...
            }
        }
        catch (Exception ex)
        {
            lblMessage.Text = ex.Message;
        }
    }

2 个答案:

答案 0 :(得分:0)

请在代码中添加jquery-ui Js,Css和图像文件。然后在某个事件上调用此对话框。 Javascript代码

 $( "#dialog-confirm" ).dialog({
                      resizable: false,
                      height: "auto",
                      width: "99%",
                      modal: true,
                      buttons: {
                        "I Agree": function() {
                          $( this ).dialog( "close" );
                        },
                        "I Don't Agree": function() {
                            $('#agreed').prop('checked', false);
                          $( this ).dialog( "close" );
                        }
                      }
                    });

这是对话框的html。

  <div id="dialog-confirm" style="display:none;" title="Agreement Form">
    Some text 
    </div>

如果您有任何问题,请随时与我联系。

答案 1 :(得分:0)

$('button[name="remove_levels"]').on('click', function(e){
var $form=$(this).closest('form');
e.preventDefault();
$('#confirm').modal({ backdrop: 'static', keyboard: false })
    .one('click', '#delete', function (e) {
        $form.trigger('submit');
    });

});

请检查以下链接

http://jsfiddle.net/L3ddq/1/