Bagaimana cara menerapkan dialog "konfirmasi" dalam dialog Jquery UI?

Saya mencoba menggunakan Dialog JQuery UI untuk mengganti javascript:alert()kotak yang jelek . Dalam skenario saya, saya memiliki daftar item, dan di sebelah masing-masing individu, saya akan memiliki tombol "hapus" untuk masing-masing. pengaturan html psuedo akan menjadi sesuatu sebagai berikut:

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

Di bagian JQ, pada dokumen siap, saya pertama-tama akan mengatur div menjadi dialog modal dengan tombol yang diperlukan, dan mengatur "a" untuk menjadi konfirmasi sebelum menghapus, seperti:

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

Oke, ini masalahnya. selama waktu init, dialog tidak akan tahu siapa (item) akan menjalankannya, dan juga id item (!). Bagaimana saya bisa mengatur perilaku tombol konfirmasi itu untuk, jika pengguna masih memilih YA, itu akan mengikuti tautan untuk menghapusnya?

Saya hanya harus menyelesaikan masalah yang sama. Kunci untuk membuatnya berfungsi adalah bahwa dialogsebagian harus diinisialisasi dalam clickevent handler untuk tautan yang Anda ingin gunakan fungsionalitas konfirmasi dengan (jika Anda ingin menggunakan ini untuk lebih dari satu tautan). Ini karena URL target untuk tautan harus dimasukkan ke dalam event handler untuk klik tombol konfirmasi. Saya menggunakan kelas CSS untuk menunjukkan tautan mana yang harus memiliki perilaku konfirmasi.

Inilah solusi saya, disarikan untuk menjadi contoh.

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

Saya percaya ini akan bekerja untuk Anda, jika Anda dapat menghasilkan tautan Anda dengan kelas CSS ( confirmLink, dalam contoh saya).

Berikut adalah jsfiddle dengan kode di dalamnya.

Untuk kepentingan pengungkapan penuh, saya akan mencatat bahwa saya menghabiskan beberapa menit untuk masalah khusus ini dan saya memberikan jawaban yang serupa untuk pertanyaan ini , yang juga tanpa jawaban yang diterima pada saat itu.

Saya menemukan jawaban oleh Paul tidak cukup bekerja karena cara dia mengatur opsi SETELAH dialog instantiated pada acara klik tidak benar. Ini kode saya yang berfungsi. Saya belum membuatnya sesuai dengan contoh Paul, tetapi hanya perbedaan kumis kucing dalam hal beberapa elemen diberi nama berbeda. Anda harus bisa menyelesaikannya. Koreksi ada di setter dari opsi dialog untuk tombol pada event klik.

$(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");

    });

});

Semoga ini bisa membantu orang lain karena postingan ini semula membuat saya berada di jalur yang benar. Saya pikir saya sebaiknya memposting koreksi.

Saya telah membuat fungsi saya sendiri untuk dialog konfirmasi jquery ui. Ini kodenya

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');
      }
    }
  });
}

Sekarang untuk menggunakan ini dalam kode Anda, cukup tulis berikut ini

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

Lanjutkan.

Solusi sederhana dan pendek yang baru saja saya coba dan berhasil

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

kemudian tambahkan saja class = "confirm" ke tautan Anda dan itu berfungsi!

Ini solusi saya .. saya harap ini membantu siapa pun. Itu ditulis dengan cepat bukannya copypasted jadi maafkan saya atas kesalahan.

$("#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");
    }
});

Secara pribadi saya lebih suka solusi ini :)

sunting: Maaf .. saya benar-benar harus menjelaskannya lebih detail. Saya menyukainya karena menurut saya ini solusi yang elegan. Ketika pengguna mengklik tombol yang perlu dikonfirmasi terlebih dahulu, acara dibatalkan sebagaimana mestinya. Ketika tombol konfirmasi diklik solusinya bukan untuk mensimulasikan klik tautan tetapi untuk memicu acara jquery asli yang sama (klik) pada tombol asli yang akan dipicu jika tidak ada dialog konfirmasi. Satu-satunya perbedaan adalah namespace acara yang berbeda (dalam hal ini 'dikonfirmasi') sehingga dialog konfirmasi tidak ditampilkan lagi. Mekanisme asli Jquery kemudian dapat mengambil alih dan hal-hal dapat berjalan seperti yang diharapkan. Keuntungan lain adalah dapat digunakan untuk tombol dan hyperlink. Saya harap saya cukup jelas.

Saya tahu ini adalah pertanyaan lama tapi ini solusi saya menggunakan atribut data HTML5 di MVC4:

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

Kode 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");
});

Akankah ini berhasil?

$("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');
});

Seperti di atas. Posting sebelumnya membuat saya di jalur yang benar. Beginilah cara saya melakukannya. Idenya adalah memiliki gambar di sebelah setiap baris dalam tabel (dihasilkan oleh skrip PHP dari database). Ketika sebuah gambar diklik, pengguna akan diarahkan ke URL, dan sebagai hasilnya, catatan yang sesuai akan dihapus dari database sambil menunjukkan beberapa data terkait dengan catatan yang diklik dalam jQuery UI Dialog.

Kode 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');
}

Dialog div:

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

Tautan gambar:

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

Dengan cara ini Anda bisa melewatkan nilai loop PHP ke dalam kotak dialog. Satu-satunya downside menggunakan metode GET untuk benar-benar melakukan tindakan.

Bagaimana dengan ini:

$("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;
});

Saya sudah mengujinya di html ini:

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

Ini menghapus elemen li keseluruhan, Anda dapat menyesuaikannya dengan kebutuhan Anda.

(Pada 03/22/2016, unduhan pada halaman yang ditautkan tidak berfungsi. Saya meninggalkan tautan di sini jika pengembang memperbaikinya di beberapa titik karena ini adalah plugin kecil yang hebat. Posting aslinya mengikuti. alternatif, dan tautan yang benar-benar berfungsi: jquery.confirm .)

Ini mungkin terlalu sederhana untuk kebutuhan Anda, tetapi Anda dapat mencoba plugin konfirmasi jQuery ini . Sangat mudah digunakan dan melakukan pekerjaan dalam banyak kasus.

Meskipun saya benci menggunakan eval, sepertinya cara termudah bagi saya, tanpa menyebabkan banyak masalah tergantung pada keadaan yang berbeda. Mirip dengan fungsi settimeout 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>

Saya mengalami ini sendiri dan berakhir dengan solusi, yang mirip dengan beberapa jawaban di sini, tetapi diimplementasikan sedikit berbeda. Saya tidak suka banyak potongan javascript, atau tempat penampung di suatu tempat. Saya ingin solusi umum, yang kemudian dapat digunakan dalam HTML tanpa menambahkan javascript untuk setiap penggunaan. Inilah yang saya buat (ini membutuhkan 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");
        }
      }
    });

  });

});

Dan kemudian dalam HTML, tidak ada panggilan javascript atau referensi yang diperlukan:

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

Karena atribut judul digunakan untuk konten div, pengguna bahkan bisa mendapatkan pertanyaan konfirmasi dengan mengarahkan kursor ke tombol (itulah sebabnya saya tidak menggunakan atribut judul untuk ubin). Judul jendela konfirmasi adalah konten dari tag alt. Snip javascript dapat dimasukkan dalam .js umum termasuk, dan hanya dengan menerapkan kelas Anda memiliki jendela konfirmasi cantik.

$("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;
        });

CATATAN: Tidak cukup perwakilan untuk berkomentar tetapi jawaban BineG bekerja dengan sempurna dalam menyelesaikan masalah postback dengan halaman ASPX seperti yang disorot oleh Homer dan echo. Untuk menghormati, inilah variasi menggunakan dialog dinamis.

$('#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();  
});

Variasi lain di atas di mana ia memeriksa apakah kontrol adalah 'asp: linkbutton' atau 'asp: tombol' yang dirender sebagai dua kontrol html yang berbeda. Tampaknya bekerja dengan baik untuk saya tetapi belum mengujinya secara ekstensif.

        $(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");
        });

Saya sedang mencari ini untuk digunakan pada tombol-link dalam ASP.NET Gridview (Kontrol GridView dalam Perintah). Jadi tindakan "Konfirmasi" dalam dialog perlu mengaktifkan skrip yang dihasilkan oleh kontrol Gridview saat run-time. ini bekerja untuk saya:

 $(".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");
             }
         }
     });
 });

Saya tahu pertanyaan ini sudah lama tetapi ini adalah pertama kalinya saya harus menggunakan dialog konfirmasi. Saya pikir ini adalah cara terpendek untuk melakukannya.

$(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;
});

Saya harap Anda menyukainya :)

Secara pribadi saya melihat ini sebagai persyaratan berulang dalam banyak tampilan dari banyak aplikasi ASP.Net MVC.

Itu sebabnya saya mendefinisikan kelas model dan tampilan sebagian:

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; }
  }
}

Dan sebagian pandangan saya:

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

Dan kemudian, setiap kali Anda membutuhkannya dalam tampilan, Anda hanya menggunakan @ Html.Partial (dalam melakukannya di skrip bagian sehingga JQuery didefinisikan):

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

Caranya adalah dengan menentukan JQueryClickSelector yang akan cocok dengan elemen yang membutuhkan dialog konfirmasi. Dalam kasus saya, semua jangkar dengan kelas SyLinkDelete tetapi itu bisa berupa pengidentifikasi, kelas yang berbeda dll. Bagi saya itu adalah daftar:

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

Topik yang sangat populer dan google menemukan ini untuk permintaan "dialog jquery tutup acara mana yang diklik". Solusi saya menangani acara YA, TIDAK, ESC_KEY, X dengan benar. Saya ingin fungsi panggilan balik saya dipanggil tidak peduli bagaimana dialog dibuang.

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);
});

Sangat mudah untuk mengarahkan ulang browser ke url baru atau melakukan sesuatu yang lain pada fungsi retval.

Begitu banyak jawaban bagus di sini;) Ini pendekatan saya. Serupa dengan penggunaan 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'
            }
        ]
    });     
}

Dan penggunaannya terlihat seperti:

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

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

Di luar kotak JQuery UI menawarkan solusi ini:

$( 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>

Anda selanjutnya dapat menyesuaikan ini dengan memberikan nama untuk fungsi JQuery dan melewati teks / judul yang ingin ditampilkan sebagai parameter.

Referensi: https://jqueryui.com/dialog/#modal-confirmation

Nah ini jawaban dari pertanyaan Anda ...

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

pastikan Anda memiliki jquery 1.4.4 dan jquery.ui

Cara mudah dengan sentuhan 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();
}