Làm cách nào để triển khai hộp thoại xác nhận của người dùng trong hộp thoại Jquery UI?

Tôi đang cố gắng sử dụng Hộp thoại JQuery UI để thay thế javascript:alert()hộp xấu xí . Trong kịch bản của tôi, tôi có một danh sách các mục và bên cạnh mỗi cá nhân trong số đó, tôi sẽ có nút "xóa" cho mỗi mục. thiết lập html psuedo sẽ là một cái gì đó như sau:

<ul>
    <li>ITEM <a href="url/to/remove"> <span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>

<div id="confirmDialog">Are you sure?</div>

Trong phần JQ, trên tài liệu đã sẵn sàng, trước tiên tôi sẽ thiết lập div thành hộp thoại phương thức với nút cần thiết và đặt "a" thành bắn để xác nhận trước khi xóa, như:

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

OK, đây là vấn đề. trong thời gian init, hộp thoại sẽ không biết ai (vật phẩm) sẽ kích hoạt nó và cả id vật phẩm (!). Làm cách nào tôi có thể thiết lập hành vi của các nút xác nhận đó để, nếu người dùng vẫn chọn CÓ, nó sẽ theo liên kết để xóa nó?

Tôi chỉ phải giải quyết vấn đề tương tự. Chìa khóa để làm cho điều này hoạt động là dialogphải được khởi tạo một phần trong clicktrình xử lý sự kiện cho liên kết bạn muốn sử dụng chức năng xác nhận với (nếu bạn muốn sử dụng điều này cho nhiều hơn một liên kết). Điều này là do URL mục tiêu cho liên kết phải được đưa vào bộ xử lý sự kiện để nhấp vào nút xác nhận. Tôi đã sử dụng một lớp CSS để chỉ ra các liên kết nào sẽ có hành vi xác nhận.

Đây là giải pháp của tôi, được tóm tắt để phù hợp với một ví dụ.

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

Tôi tin rằng điều này sẽ phù hợp với bạn, nếu bạn có thể tạo các liên kết của mình với lớp CSS ( confirmLink, trong ví dụ của tôi).

Đây là một jsfiddle với mã trong đó.

Để tiết lộ đầy đủ, tôi sẽ lưu ý rằng tôi đã dành vài phút cho vấn đề đặc biệt này và tôi đã cung cấp một câu trả lời tương tự cho câu hỏi này , cũng không có câu trả lời được chấp nhận tại thời điểm đó.

Tôi thấy câu trả lời của Paul không hoàn toàn hiệu quả vì cách anh ta đặt các tùy chọn SAU hộp thoại được khởi tạo trong sự kiện nhấp chuột là không chính xác. Đây là mã của tôi đã làm việc. Tôi đã không điều chỉnh nó để phù hợp với ví dụ của Paul nhưng đó chỉ là sự khác biệt của một con mèo về một số yếu tố được đặt tên khác nhau. Bạn sẽ có thể làm việc đó. Việc hiệu chỉnh nằm trong bộ cài đặt của tùy chọn hộp thoại cho các nút trên sự kiện nhấp.

$(document).ready(function() {

    $("#dialog").dialog({
        modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
        autoOpen: false
    });


    $(".lb").click(function(e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");

        $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        });

        $("#dialog").dialog("open");

    });

});

Hy vọng điều này sẽ giúp người khác vì bài đăng này ban đầu đã đưa tôi đi đúng hướng Tôi nghĩ rằng tôi nên đăng bài chỉnh sửa.

Tôi đã tạo một chức năng của riêng mình cho hộp thoại xác nhận jquery ui. Đây là mã

function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
  $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
    draggable: false,
    modal: true,
    resizable: false,
    width: 'auto',
    title: dialogTitle || 'Confirm',
    minHeight: 75,
    buttons: {
      OK: function () {
        if (typeof (okFunc) == 'function') {
          setTimeout(okFunc, 50);
        }
        $(this).dialog('destroy');
      },
      Cancel: function () {
        if (typeof (cancelFunc) == 'function') {
          setTimeout(cancelFunc, 50);
        }
        $(this).dialog('destroy');
      }
    }
  });
}

Bây giờ để sử dụng mã này trong mã của bạn, chỉ cần viết như sau

myConfirm('Do you want to delete this record ?', function () {
    alert('You clicked OK');
  }, function () {
    alert('You clicked Cancel');
  },
  'Confirm Delete'
);

Đi tiếp.

Giải pháp đơn giản và ngắn gọn mà tôi vừa thử và nó hoạt động

  $('.confirm').click(function() {
    $(this).removeClass('confirm');
    $(this).text("Sure?");
    $(this).unbind();
    return false;
  });

sau đó chỉ cần thêm lớp = "xác nhận" vào liên kết của bạn và nó hoạt động!

Đây là giải pháp của tôi .. tôi hy vọng nó sẽ giúp được bất cứ ai. Nó được viết một cách nhanh chóng thay vì sao chép vì vậy hãy tha thứ cho tôi về bất kỳ sai lầm nào.

$("#btn").on("click", function(ev){
    ev.preventDefault();

    dialog.dialog("open");

    dialog.find(".btnConfirm").on("click", function(){
        // trigger click under different namespace so 
        // click handler will not be triggered but native
        // functionality is preserved
        $("#btn").trigger("click.confirmed");
    }
    dialog.find(".btnCancel").on("click", function(){
        dialog.dialog("close");
    }
});

Cá nhân tôi thích giải pháp này :)

chỉnh sửa: Xin lỗi .. tôi thực sự nên giải thích chi tiết hơn. Tôi thích nó bởi vì theo tôi đó là một giải pháp thanh lịch. Khi người dùng nhấp vào nút cần xác nhận trước tiên, sự kiện sẽ bị hủy. Khi nhấp vào nút xác nhận, giải pháp không phải là mô phỏng nhấp chuột liên kết mà là để kích hoạt cùng một sự kiện jquery riêng (nhấp) vào nút ban đầu sẽ được kích hoạt nếu không có hộp thoại xác nhận. Sự khác biệt duy nhất là một không gian tên sự kiện khác nhau (trong trường hợp này là 'xác nhận') để hộp thoại xác nhận không được hiển thị lại. Cơ chế tự nhiên của Jquery sau đó có thể tiếp quản và mọi thứ có thể chạy như mong đợi. Một lợi thế khác là nó có thể được sử dụng cho các nút và siêu liên kết. Tôi hy vọng tôi đã đủ rõ ràng.

Tôi biết đây là một câu hỏi cũ nhưng đây là giải pháp của tôi bằng cách sử dụng các thuộc tính dữ liệu HTML5 trong MVC4:

<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
  Are you sure about this?
</div>

Mã JS:

$("#dialog").dialog({
    modal: true,              
    autoOpen: false,
    buttons: {
        "Confirm": function () {
            window.location.href = $(this).data('url');
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("#TheIdOfMyButton").click(function (e) {
    e.preventDefault();
    $("#dialog").dialog("open");
});

Điều này sẽ làm gì?

$("ul li a").click(function(e) {
  e.preventDefault();
  $('#confirmDialog').show();

  var delete_path = $(this).attr('href');

  $('#confirmDialog a.ok').unbind('click'); //  just in case the cancel link 
                                            //  is not the  only way you can
                                            //  close your dialog
  $('#confirmDialog a.ok').click(function(e) {
     e.preventDefault();
     window.location.href = delete_path;
  });

});

$('#confirmDialog a.cancel').click(function(e) {
   e.preventDefault();
   $('#confirmDialog').hide();
   $('#confirmDialog a.ok').unbind('click');
});

Như trên. Bài viết trước đã đưa tôi đi đúng hướng. Đây là cách tôi đã thực hiện nó. Ý tưởng là để có một hình ảnh bên cạnh mỗi hàng trong bảng (được tạo bởi tập lệnh PHP từ cơ sở dữ liệu). Khi một hình ảnh được nhấp vào, người dùng sẽ được chuyển hướng đến URL và do đó, bản ghi thích hợp sẽ bị xóa khỏi cơ sở dữ liệu trong khi hiển thị một số dữ liệu liên quan đến bản ghi được nhấp trong Hộp thoại UI UI.

Mã JavaScript:

$(document).ready(function () {
  $("#confirmDelete").dialog({
    modal: true,
    bgiframe: true,
    autoOpen: false
  });
});

function confirmDelete(username, id) {
  var delUrl = "/users/delete/" + id;
  $('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'");
  $('#confirmDelete').dialog('option', 'buttons', {
    "No": function () {
      $(this).dialog("close");
    },
    "Yes": function () {
      window.location.href = delUrl;
    }
  });
  $('#confirmDelete').dialog('open');
}

Hộp thoại div:

<div id="confirmDelete" title="Delete User?"></div> 

Đường kết nối tới hình ảnh:

<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>

Bằng cách này bạn có thể chuyển các giá trị vòng lặp PHP vào hộp thoại. Nhược điểm duy nhất là sử dụng phương thức GET để thực sự thực hiện hành động.

Còn cái này thì sao:

$("ul li a").click(function() {

el = $(this);
$("#confirmDialog").dialog({ autoOpen: false, resizable:false,
                             draggable:true,
                             modal: true,
                             buttons: { "Ok": function() {
                                el.parent().remove();
                                $(this).dialog("close"); } }
                           });
$("#confirmDialog").dialog("open");

return false;
});

Tôi đã thử nó ở html này:

<ul>
<li><a href="#">Hi 1</a></li>
<li><a href="#">Hi 2</a></li>
<li><a href="#">Hi 3</a></li>
<li><a href="#">Hi 4</a></li>
</ul>

Nó loại bỏ toàn bộ phần tử li, bạn có thể điều chỉnh nó theo nhu cầu của bạn.

(Kể từ ngày 22/03/2016, tải xuống trên trang được liên kết với không hoạt động. Tôi sẽ để lại liên kết ở đây trong trường hợp nhà phát triển sửa nó vào một lúc nào đó bởi vì đó là một plugin nhỏ tuyệt vời. Bài đăng gốc. thay thế và một liên kết thực sự hoạt động: jquery. thông tin xác nhận .)

Nó có thể quá đơn giản cho nhu cầu của bạn, nhưng bạn có thể thử điều này plugin xác nhận jQuery . Nó thực sự đơn giản để sử dụng và thực hiện công việc trong nhiều trường hợp.

Nhiều như tôi ghét sử dụng eval, nó dường như là cách dễ nhất đối với tôi, mà không gây ra nhiều vấn đề tùy thuộc vào hoàn cảnh khác nhau. Tương tự như chức năng giải quyết javascript.

<a href="#" onclick="javascript:confirm('do_function(params)');">Confirm</a>
<div id="dialog-confirm" title="Confirm" style="display:none;">
    <p>Are you sure you want to do this?</p>
</div>
<script>
function confirm(callback){
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: false,
        buttons: {
            "Ok": function() {
                $( this ).dialog( "close" );
                eval(callback)
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                return false;
            }
        }
    });
}

function do_function(params){
    console.log('approved');
}
</script>

Tôi đã tự mình tìm hiểu và kết thúc với một giải pháp, tương tự như một số câu trả lời ở đây, nhưng được thực hiện hơi khác. Tôi không thích nhiều đoạn javascript hoặc div giữ chỗ ở đâu đó. Tôi muốn một giải pháp tổng quát, sau đó có thể được sử dụng trong HTML mà không cần thêm javascript cho mỗi lần sử dụng. Đây là những gì tôi đã đưa ra (điều này đòi hỏi jquery ui):

Javascript:

$(function() {

  $("a.confirm").button().click(function(e) {

    e.preventDefault();

    var target = $(this).attr("href");
    var content = $(this).attr("title");
    var title = $(this).attr("alt");

    $('<div>' + content + '</div>'). dialog({
      draggable: false,
      modal: true,
      resizable: false,
      width: 'auto',
      title: title,
      buttons: {
        "Confirm": function() {
          window.location.href = target;
        },
        "Cancel": function() {
          $(this).dialog("close");
        }
      }
    });

  });

});

Và sau đó trong HTML, không cần các cuộc gọi hoặc tham chiếu javascript:

<a href="http://www.google.com/"
   class="confirm"
   alt="Confirm test"
   title="Are you sure?">Test</a>

Vì thuộc tính tiêu đề được sử dụng cho nội dung div, người dùng thậm chí có thể nhận được câu hỏi xác nhận bằng cách di chuột qua nút (đó là lý do tại sao tôi không sử dụng thuộc tính tiêu đề cho ô xếp). Tiêu đề của cửa sổ xác nhận là nội dung của thẻ alt. Đoạn mã javascript có thể được bao gồm trong .js tổng quát bao gồm và chỉ cần áp dụng một lớp bạn có một cửa sổ xác nhận đẹp.

$("ul li a").live('click', function (e) {
            e.preventDefault();

            $('<div></div>').appendTo('body')
                    .html('<div><h6>Are you sure about this?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', modal: true, resizable: false,
                        buttons: {
                            Confirm: function () {
                                // $(obj).removeAttr('onclick');                                
                                // $(obj).parents('.Parent').remove();

                                $(this).dialog("close");

                                window.location.reload();
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        Cancel: function (event, ui) {
                            $(this).remove();
                        }
                    });

            return false;
        });

LƯU Ý: Không đủ đại diện để nhận xét nhưng câu trả lời của BineG hoạt động hoàn hảo trong việc giải quyết các vấn đề về hậu kỳ với các trang ASPX như được tô sáng bởi Homer và echo. Để vinh danh, đây là một biến thể sử dụng hộp thoại động.

$('#submit-button').bind('click', function(ev) {
    var $btn = $(this);
    ev.preventDefault();
    $("<div />").html("Are you sure?").dialog({
        modal: true,
        title: "Confirmation",
        buttons: [{
            text: "Ok",
            click: function() {
                $btn.trigger("click.confirmed");
                $(this).dialog("close");
            }
        }, {
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        }]
    }).show();  
});

Một biến thể khác ở trên, trong đó nó kiểm tra xem điều khiển là 'asp: linkbutton' hay 'asp: button', biểu hiện như hai điều khiển html khác nhau. Có vẻ như chỉ hoạt động tốt với tôi nhưng chưa thử nghiệm rộng rãi.

        $(document).on("click", ".confirm", function (e) {
            e.preventDefault();
            var btn = $(this);
            $("#dialog").dialog('option', 'buttons', {
                "Confirm": function () {
                    if (btn.is("input")) {                            
                        var name = btn.attr("name");
                        __doPostBack(name, '')
                    }
                    else {
                        var href = btn.attr("href");
                        window.location.href = href;
                    }
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            });

            $("#dialog").dialog("open");
        });

Tôi đang tìm kiếm cái này để sử dụng trên các nút liên kết trong ASP.NET Gridview (Xây dựng GridView Control trong Lệnh) Vì vậy, hành động "Xác nhận" trong hộp thoại cần kích hoạt tập lệnh được tạo bởi điều khiển Gridview trong thời gian chạy. điều này làm việc cho tôi:

 $(".DeleteBtnClass").click(function (e) {
     e.preventDefault();
     var inlineFunction = $(this).attr("href") + ";";
     $("#dialog").dialog({
         buttons: {
             "Yes": function () {
                 eval(inlineFunction); // eval() can be harmful!
             },
                 "No": function () {
                 $(this).dialog("close");
             }
         }
     });
 });

Tôi biết câu hỏi này đã cũ nhưng đây là lần đầu tiên tôi phải sử dụng hộp thoại xác nhận. Tôi nghĩ rằng đây là cách ngắn nhất để làm điều đó.

$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger
  var conBox = confirm("Are you sure ?");
    if(conBox){ 
        // Do what you have to do
    }
    else
        return;
});

Tôi hy vọng bạn thích nó :)

Cá nhân tôi thấy đây là một yêu cầu thường xuyên trong nhiều khung nhìn của nhiều ứng dụng ASP.Net MVC.

Đó là lý do tại sao tôi đã định nghĩa một lớp mô hình và một khung nhìn một phần:

using Resources;

namespace YourNamespace.Models
{
  public class SyConfirmationDialogModel
  {
    public SyConfirmationDialogModel()
    {
      this.DialogId = "dlgconfirm";
      this.DialogTitle = Global.LblTitleConfirm;
      this.UrlAttribute = "href";
      this.ButtonConfirmText = Global.LblButtonConfirm;
      this.ButtonCancelText = Global.LblButtonCancel;
    }

    public string DialogId { get; set; }
    public string DialogTitle { get; set; }
    public string DialogMessage { get; set; }
    public string JQueryClickSelector { get; set; }
    public string UrlAttribute { get; set; }
    public string ButtonConfirmText { get; set; }
    public string ButtonCancelText { get; set; }
  }
}

Và quan điểm một phần của tôi:

@using YourNamespace.Models;

@model SyConfirmationDialogModel

<div id="@Model.DialogId" title="@Model.DialogTitle">
  @Model.DialogMessage
</div>

<script type="text/javascript">
  $(function() {
    $("#@Model.DialogId").dialog({
      autoOpen: false,
      modal: true
    });

    $("@Model.JQueryClickSelector").click(function (e) {
      e.preventDefault();
      var sTargetUrl = $(this).attr("@Model.UrlAttribute");

      $("#@Model.DialogId").dialog({
        buttons: {
          "@Model.ButtonConfirmText": function () {
            window.location.href = sTargetUrl;
          },  
          "@Model.ButtonCancelText": function () {
            $(this).dialog("close");
          }
        }
      });

      $("#@Model.DialogId").dialog("open");
    });
  });
</script>

Và sau đó, mỗi khi bạn cần nó trong một khung nhìn, bạn chỉ cần sử dụng @ Html.Partial (đã thực hiện nó trong các tập lệnh phần để JQuery được xác định):

@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})

Mẹo là chỉ định JQueryClickSelector sẽ khớp với các phần tử cần hộp thoại xác nhận. Trong trường hợp của tôi, tất cả các neo với lớp SyLinkDelete nhưng nó có thể là một định danh, một lớp khác, v.v ... Đối với tôi đó là một danh sách:

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
    <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>

Chủ đề rất phổ biến và google tìm thấy điều này cho "hộp thoại jquery đóng truy vấn sự kiện nào được nhấp". Giải pháp của tôi xử lý đúng các sự kiện CÓ, KHÔNG, ESC_KEY, X. Tôi muốn chức năng gọi lại của tôi được gọi bất kể hộp thoại được xử lý như thế nào.

function dialog_YES_NO(sTitle, txt, fn) {
    $("#dialog-main").dialog({
        title: sTitle,
        resizable: true,
        //height:140,
        modal: true,
        open: function() { $(this).data("retval", false); $(this).text(txt); },
        close: function(evt) {
            var arg1 = $(this).data("retval")==true;
            setTimeout(function() { fn(arg1); }, 30);
        },
        buttons: {
            "Yes": function() { $(this).data("retval", true); $(this).dialog("close"); },
            "No": function()  { $(this).data("retval", false); $(this).dialog("close"); }
        }
    });
}
- - - - 
dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) {
   alert("Dialog retval is " + status);
});

Thật dễ dàng để chuyển hướng trình duyệt đến một url mới hoặc thực hiện một cái gì đó khác về chức năng định giá lại.

Vì vậy, nhiều câu trả lời tốt ở đây;) Đây là cách tiếp cận của tôi. Tương tự với cách sử dụng eval ().

function functionExecutor(functionName, args){
    functionName.apply(this, args);
}

function showConfirmationDialog(html, functionYes, fYesArgs){
    $('#dialog').html(html);
    $('#dialog').dialog({
        buttons : [
            {
                text:'YES',
                click: function(){
                    functionExecutor(functionYes, fYesArgs);
                    $(this).dialog("close");
                },
                class:'green'
            },
            {
                text:'CANCEL',
                click: function() {
                    $(this).dialog("close");
                },
                class:'red'
            }
        ]
    });     
}

Và cách sử dụng trông như sau:

function myTestYesFunction(arg1, arg2){
    alert("You clicked YES:"+arg1+arg2);
}

function toDoOrNotToDo(){
    showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}

Giao diện người dùng JQuery cung cấp giải pháp này:

$( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );

HTML

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
 </span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

Bạn có thể tùy chỉnh thêm điều này bằng cách cung cấp tên cho hàm JQuery và chuyển văn bản / tiêu đề bạn muốn hiển thị dưới dạng tham số.

Tham khảo: https://jqueryui.com/dialog/#modal- xác nhận

Vâng, đây là câu trả lời cho câu hỏi của bạn ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Santa Luisa</TITLE>
<style>
    body{margin:0;padding:0;background-color:#ffffff;}
    a:link {color:black;}    
a:visited {color:black;}  
a:hover {color:red;}  
a:active {color:red;}
</style>

</HEAD>
<body>

<link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css">
    <script src="jquery-1.4.4.js"></script>

    <script src="external/jquery.bgiframe-2.1.2.js"></script>
    <script src="ui/jquery.ui.core.js"></script>

    <script src="ui/jquery.ui.widget.js"></script>
    <script src="ui/jquery.ui.mouse.js"></script>
    <script src="ui/jquery.ui.draggable.js"></script>
    <script src="ui/jquery.ui.position.js"></script>

    <script src="ui/jquery.ui.resizable.js"></script>
    <script src="ui/jquery.ui.dialog.js"></script>

    <link rel="stylesheet" href="demos.css">
    <script>
    var lastdel;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,modal: true,closeOnEscape: true
        });

        $(".confirmLink").click(function(e) {
            e.preventDefault();
            var lastdel = $(this).attr("href");

        });


        $("#si").click( function() {
            $('#dialog').dialog('close');
            window.location.href =lastdel;

        });
        $("#no").click( function() {
            $('#dialog').dialog('close');
        });
    });

    </script>

<SCRIPT LANGUAGE="JavaScript">
<!--
        var currentimgx;
        var cimgoverx=200-6;
        var cimgoutx=200;


        function overbx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';


        currentimgx.style.width=cimgoverx+"px";
        currentimgx.style.height=cimgoverx+"px"; 

    }

    function outbx(obj){
        obj.style.borderTopWidth = '0px';   
        obj.style.borderLeftWidth = '0px';
        obj.style.borderRightWidth = '0px';
        obj.style.borderBottomWidth = '0px';

        currentimgx.style.width=cimgoutx+"px";
        currentimgx.style.height=cimgoutx+"px"; 
    }

function ifocusx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';

    }

    function iblurx(obj){
        color='#000000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';
    }

    function cimgx(obj){
        currentimgx=obj;
    }


    function pause(millis){
    var date = new Date();
    var curDate = null;

    do { curDate = new Date(); }
    while(curDate-date < millis);
    } 


//-->
</SCRIPT>
<div id="dialog" title="CONFERMA L`AZIONE" style="text-align:center;">
    <p><FONT  COLOR="#000000" style="font-family:Arial;font-size:22px;font-style:bold;COLOR:red;">CONFERMA L`AZIONE:<BR>POSSO CANCELLARE<BR>QUESTA RIGA ?</FONT></p>

    <p><INPUT TYPE="submit" VALUE="SI" NAME="" id="si"> --><INPUT TYPE="submit" VALUE="NO" NAME="" id="no"></p>
</div>



<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%" height="100%">
<TR valign="top" align="center">
    <TD>
    <FONT COLOR="red" style="font-family:Arial;font-size:25px;font-style:bold;color:red;">Modifica/Dettagli:<font style="font-family:Arial;font-size:20px;font-style:bold;background-color:yellow;color:red;">&nbsp;298&nbsp;</font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas&nbsp;sadsadas&nbsp;</font>&nbsp;</FONT>
    </TD>
</TR>

<tr valign="top">
    <td align="center">
        <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
        <TR align="left">

            <TD>
                <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">

                <TR align="left">
                    <TD>
                    <font style="font-sixe:30px;"><span style="color:red;">1</span></font><br><TABLE class="tabela" CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="800px"><TR style="color:white;background-color:black;"><TD align="center">DATA</TD><TD align="center">CODICE</TD><TD align="center">NOME/NOMI</TD><TD  align="center">TESTO</TD><td>&nbsp;</td><td>&nbsp;</td></TR><TR align="center"><TD>12/22/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=1';alert(lastdel);" class="confirmLink">Cancella</A></TD><TR align="center"><TD>22/10/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>dfdsfsdfsf</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=2';alert(lastdel);" class="confirmLink">Cancella</A></TD></TABLE><font style="font-sixe:30px;"><span style="color:red;">1</span></font><br>

                    </TD>
                </TR>

                </TABLE>
            </TD>
        </TR>
        </TABLE>
    </td>
</tr>
</tbody></table>


</body>
</html>

đảm bảo bạn có jquery 1.4.4 và jquery.ui

Cách dễ dàng với một liên lạc của javascript

$("#myButton").click(function(event) {
    var cont = confirm('Continue?');
    if(cont) {
        // do stuff here if OK was clicked
        return true;
    }
    // If cancel was clicked button execution will be halted.
    event.preventDefault();
}