Javascript 自定义确认弹出窗口

我正在尝试使用插件自定义确认消息。我有php表格记录，每行都有删除按钮。我如何像下面的jquery插件那样定制确认弹出窗口

<?php echo'
<tr class="record"> 
    <td align="center"><a href="#" id="'.$row["counter"].'" class="delbutton"><img src="images/del.png"></a></td></tr>';
?>
    <script>
        $(function() {
        $(".delbutton").click(function(){
        var element = $(this);
        var del_id = element.attr("id");
        var info = 'id=' + del_id;
         if(confirm("Are you want to continue ?"))
                  {
         $.ajax({
           type: "GET",
           url: "delete.php",
           data: info,
           success: function(){
           }
         });
                 $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
                .animate({ opacity: "hide" }, "slow");
         }
        return false;
        });
        });
    </script>

$（函数（）{
$（“.delbutton”）。单击（函数（）{
var元素=$（此）；
var del_id=element.attr（“id”）；
var info='id='+del_id；
如果（确认（“是否要继续？”）
{
$.ajax({
键入：“获取”，
url:“delete.php”，
数据：信息，
成功：函数（）{
}
});
$（this.parents（“.record”）.animate（{backgroundColor:{fbc7c7}，“fast”）
.animate（{opacity:“hide”}，“slow”）；
}
返回false；
});
});

Jquery插件

<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

$（函数（）{
$（“#对话框确认”）。对话框({
可调整大小：false，
身高：140，
莫代尔：是的，
按钮：{
“删除所有项目”：函数（）{
$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
});
这些项目将被永久删除，无法恢复。你确定吗

如果你需要更多帮助，尽管问

"Delete all items": function() {
// insert your ajax here
$( this ).dialog( "close" );
},

参考资料：

希望这有助于：

  <?php echo'
  <tr class="record"> 
      <td align="center"><a href="#" id="'.$row["counter"].'" class="delbutton"><img src="images/del.png"></a></td></tr>';
  ?>
  <script>
      $(function() {
        $(".delbutton").click(function(){
            var element = $(this);
            var del_id = element.attr("id");
            var info = 'id=' + del_id;
            $( "#dialog-confirm" ).dialog({
                  resizable: false,
                  height:140,
                  modal: true,
                  buttons: {
                    "Delete all items": function() {                           
                       $.ajax({
                         type: "GET",
                         url: "delete.php",
                         data: info,
                         success: function(){
                            $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow");
                         }
                       }); 
                       $( this ).dialog( "close" );
                    },
                    Cancel: function() {
                      $( this ).dialog( "close" );
                      return false;
                    }
                  }
                }); // end Dialog         
            return false;
        }); // end .delbtn
    }); // end jquery load
  </script>

$（函数（）{
$（“.delbutton”）。单击（函数（）{
var元素=$（此）；
var del_id=element.attr（“id”）；
var info='id='+del_id；
$（“#对话框确认”）。对话框({
可调整大小：false，
身高：140，
莫代尔：是的，
按钮：{
“删除所有项”：函数（）{
$.ajax({
键入：“获取”，
url:“delete.php”，
数据：信息，
成功：函数（）{
$（这个）.parents（“.record”）.animate（{backgroundColor:“#fbc7c7”}，“fast”）.animate（{opacity:“hide”}，“slow”）；
}
}); 
$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
返回false；
}
}
})；//结束对话框
返回false；
})；//end.delbtn
}); // 结束jquery加载

检查底线您可以不使用插件来完成此操作，如果您希望删除项目但删除记录的动画丢失，您可以在php中使用相同的插件。您可以尝试以下

$（this）.parents（.record”）.fadeOut（'slow'）

而不是

$（this）.parents（.record”）.animate（{backgroundColor:“\fbc7c7”}，“fast”）.animate（{opacity:“hide”}，“slow”）。希望这有帮助