title: How to write a dialog confirmation box using jQuery?
body: <p>I would like to ask on how to create a dialog confirmation box for deleting a record using jQuery. I tried to search in Google but I don't understand it well since I'm a newbie in this field. In addition, I already implemented a Javascript alert but the technical requirement is to use a jQuery dialog instead of a native Javascript alert. Please help. Thanks in advance. Any reference link that has step by step guide will also be appreciated. Thanks a lot.</p>
  
  <p>Below is my current code that needs to be updated.</p>
  
  <pre><code>$('.delete').click(function () {
    var pKey = $(this).parent().siblings()[0].innerText;
    //Get the Id of the record to delete
    var record_id = $(this).attr("id");
    //Get the GridView Row reference
    var tr_id = $(this).parents("#.record");
    // Ask user's confirmation before delete records
    if (confirm("Are you sure you want to delete this record?")) {
      $.ajax({
        type: "POST",
        url: '../SampleOnly.asmx/Delete',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        //Pass the selected record id
        data: "{ 'Id':'" + pKey + "'}",
        success: function (data) {
          // Change the back color of the Row before deleting
          tr_id.css("background-color", "blue");
          Do some animation effect
          tr_id.fadeOut(500, function () {
            //Remove GridView row
            tr_id.remove();
            alert(' The record has been deleted successfully');
          });
        },
  </code></pre>