自定义确认弹出答案

【问题标题】：Custom confirm pop自定义确认弹出
【发布时间】：2014-01-08 01:51:56
【问题描述】：

我正在尝试使用插件自定义确认消息。我有 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>

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>

【问题讨论】：

检查stackoverflow.com/questions/43955/…底线你可以不使用插件来做到这一点，如果你愿意，你可以在你的php中使用相同的插件

标签： javascript php jquery

【解决方案1】：

希望这会有所帮助：

  <?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>

【讨论】：

项目被删除但删除记录的动画丢失了。
你可以试试下面的$(this).parents(".record").fadeOut('slow')，而不是$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow");。希望对您有所帮助

【解决方案2】：

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

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

参考：.dialog()

【讨论】：