Javascript gridview行删除确认框

我需要在Gridview delete上显示一个删除确认框。使用OnClientClick确认框，我将显示一个用于删除确认的简单Internet浏览框。有没有可能为这个展示一个别致的盒子。下面是gridview代码中的JavaScript代码：

OnClientClick="return DeleteItem();"

下面是我的观点

<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5"  GridLines="None"  OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting">
                <Columns>
                    
                    <asp:BoundField DataField="CartID" Visible="false" HeaderText="CartID" />
                    <asp:BoundField DataField="item" HeaderText="Item" HeaderStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-CssClass="ss-row"    />
<ItemTemplate>
                             <asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"  title='Remove' CommandName="delete" OnClientClick="return DeleteItem();"  />    
</ItemTemplate>
                        </asp:TemplateField>
                </Columns>
</asp:GridView>

我想展示这样的东西：


我们将提供任何帮助。
无法将css添加到
确认
框中。您可以实现自己的JavaScript弹出窗口

或者有许多插件可以做到这一点。最流行的JQuery插件之一是jQueryUI对话框

作为将JQuery UI对话框与ASP.NET Gridview集成的示例，请尝试以下操作：

<asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"  title='Remove' CommandName="delete" class="button-delete" /> 

弹出窗口的HTML

<div style="display: none;">
    <div id="dialog-confirm" title="Remove Item?">
      <p>Are you sure you want to remove this item?</p>
    </div>
</div>


是否确实要删除此项目


注：此示例用于说明。您需要对您的解决方案进行一次尝试，以使其正常工作

$(function() {
    // Create click handler
    $('.ui-search-result-table').on('click', 'button-delete', function(e) {
        e.preventDefault($(this)); // $(this) should be a reference to imgbtnDelete
        showDialog();
    });

    // Create the dialog popup
    function showDialog(button) {
        $("#dialog-confirm").dialog({
            resizable: false,
            height: "auto",
            width: 400,
            modal: true,
            buttons: {
                "Remove": function() {
                    $(button).click(); // This should click imgbtnDelete
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        });
    }
});

<div style="display: none;">
    <div id="dialog-confirm" title="Remove Item?">
      <p>Are you sure you want to remove this item?</p>
    </div>
</div>