Как реализовать диалоговое окно подтверждения с помощью jquery-диалога?

Question

У меня есть сетка, каждая строка имеет кнопку удаления. Когда пользователь нажимает кнопку удаления, я хочу открыть диалог подтверждения с помощью 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; 
     } 
    } 

Answer 1

Пожалуйста, добавьте 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> 

Пожалуйста, не стесняйтесь обращаться ко мне, если у вас есть какие-либо проблемы с этим.

Answer 2

$('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/