Javascript 确认更改为 jquery 模式对话框

Question

我这里有一条通过ajax删除记录。如果我想删除或不删除记录，我会添加确认消息。我需要的是将确认消息更改为模式对话框 http://jqueryui.com/dialog/#modal-confirmation .

我想更改此 JavaScript 代码

if(confirm("All PR and PO in this record will be deleted. Are you want to delete?"))

进入这个 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>

Ajax删除

<script>
$(function () {
  $(".delbutton").click(function () {
    //Save the link in a variable called element
    var element = $(this);
    //Find the id of the link that was clicked
    var del_id = element.attr("name");
    //Built a url to send
    var info = 'name=' + del_id;
    if (confirm("All PR and PO in this record will be deleted. Are you want to delete?")) {
      $.ajax({
        type: "GET",
        url: "delete.php",
        data: info,
        success: function () {}
      });
      $(this).parents(".record").animate({
        backgroundColor: "#fbc7c7"
      }, "fast")
        .animate({
          opacity: "hide"
        }, "slow");
    }
    return false;
  });
});
</script>

Answer 1

您将在 html 代码中重写 JavaScript 的确认方法，如下所示

 <script>
 function confirm(message) {
 var myTitle = 
        "<div style='float: left'>Error</div><div style='float: right; margin-right: 15px;'>Close</div>";
        $('<div id="dlgTest1" style="display: none;min-height:auto;"><p style="text-align:justify;font-family:verdana;font-weight: bold;">'+message+'</p></div>').dialog({
resizable: false,
        modal: true,
        width: 300,
        height: 'auto',
        bgiframe: false,
        //position: ['top', 5],
        draggable: true,
        closeOnEscape: true,
        minHeight:20,
        buttons: [{
            text: "Cancel",
            "style": 'background-color:#CCCCCC !important;color:rgb(119, 119, 119);font-family:verdana',
              click:function(){
                $(this).dialog('close');
                return false;
            }

        },{
        text: "Ok",
        "style": 'background-color:#007AC0 !important;color:white;font-family:verdana',
          click:function(){
            $(this).dialog('close');
        }
        }
        ],
        close:function(){ $(this).dialog('destroy').remove(); }
    }).siblings('.ui-dialog-titlebar').append(myTitle); // title goes here;
    //$("#dlgTest1").dialog("open").dialog("moveToTop");
};

然后使用它，但是注意不要在上面使用html提交按钮，使用html普通按钮