Jquery UI iletişim kutusunda "onay" iletişim kutusu nasıl uygulanır?

Çirkin javascript:alert()kutusunu değiştirmek için JQuery UI iletişim kutusunu kullanmaya çalışıyorum. Benim senaryomda, bir öğeler listesi var ve her birinin yanında, her biri için bir "sil" düğmesi olurdu. psuedo html kurulumu aşağıdaki gibi bir şey olacaktır:

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

JQ kısmında, belgeye hazır olarak, önce div'ı gerekli düğmeyle kalıcı bir iletişim kutusu olacak şekilde ayarlar ve bu "a" yı kaldırmadan önce onay için tetiklenecek şekilde ayarlar:

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

Tamam, sorun burada. başlatma süresi boyunca, iletişim kutusunun kimin (öğe) tetikleyeceği hakkında hiçbir fikri olmayacaktır ve ayrıca öğe kimliği (!). Kullanıcı hala EVET'i seçerse, kaldırmak için bağlantıyı takip edecek şekilde bu onay düğmelerinin davranışını nasıl ayarlayabilirim?

Sadece aynı sorunu çözmek zorunda kaldım. Bunu çalıştırmanın anahtarı , onay işlevselliğini kullanmak istediğiniz bağlantı için olay işleyicisinde dialogkısmen başlatılması gerektiğiydi click(bunu birden fazla bağlantı için kullanmak istiyorsanız). Bunun nedeni, onay düğmesinin tıklanması için bağlantının hedef URL'sinin olay işleyiciye enjekte edilmesi gerektiğidir. Hangi bağlantıların onaylama davranışına sahip olduğunu belirtmek için bir CSS sınıfı kullandım.

İşte bir örnek için uygun olduğu düşünülen benim çözümüm.

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

CSS sınıfıyla ( confirmLinkörneğin örneğimde) bağlantılarınızı oluşturabilirseniz, bunun sizin için işe yarayacağına inanıyorum .

İşte içinde kodu olan bir jsfiddle .

Tam açıklama amacıyla, bu özel sorun için birkaç dakika geçirdim ve bu soruya benzer bir cevap verdim , bu da o zaman kabul edilmiş bir cevap vermedi.

Paul'un cevabının, tıklama olayında iletişimin başlatılmasından SONRA seçenekleri ayarlama şekli olarak işe yaramadığını gördüm. İşte benim kod çalışıyordu. Paul'ün örneğine uyacak şekilde uyarlamadım, ancak bu sadece bazı kedilerde bıyıkların bazı unsurlar açısından farkı farklı adlandırılıyor. Bunu çözebilmelisin. Düzeltme, tıklama etkinliğindeki düğmeler için iletişim kutusu ayarlayıcısındadır.

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

    });

});

Umarım bu yazı aslında bana doğru parçayı indirdiğinden başka birisine yardımcı olur.

Bir jquery ui onaylama iletişim kutusu için kendi işlevimi oluşturdum. İşte kod

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

Şimdi bunu kodunuzda kullanmak için aşağıdakileri yazmanız yeterlidir

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

Devam et.

Az önce denediğim ve işe yarayan basit ve kısa çözüm

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

sonra sadece bir bağlantıya class = "confirm" ekleyin ve işe yarıyor!

Bu benim çözümüm .. Umarım herkese yardımcı olur. Kopyala yapıştırmak yerine anında yazılmıştır, bu yüzden herhangi bir hata için beni affet.

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

Şahsen ben bu çözümü tercih ediyorum :)

edit: Üzgünüm .. i gerçekten daha ayrıntılı açıkladı. Bunu seviyorum çünkü bence zarif bir çözüm. Kullanıcı önce onaylanması gereken düğmeyi tıkladığında olay olması gerektiği gibi iptal edilir. Onay düğmesine tıklandığında çözüm, bir bağlantı tıklamasını simüle etmek değil, aynı yerel jquery olayını (tıklama), hiçbir onay iletişim kutusu olmasaydı tetiklenen orijinal düğmenin üzerine tetiklemektir. Tek fark, farklı bir olay ad alanıdır (bu durumda 'onaylandı'), böylece onay iletişim kutusu tekrar gösterilmez. Jquery yerel mekanizması daha sonra devralabilir ve işler beklendiği gibi çalışabilir. Diğer bir avantaj, düğmeler ve köprüler için kullanılabilir. Umarım yeterince açıktım.

Bu eski bir soru olduğunu biliyorum ama burada MVC4 HTML5 veri özniteliklerini kullanarak benim çözüm :

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

JS kodu:

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

Bu olur mu?

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

Yukarıdaki gibi. Önceki gönderiler beni doğru yola soktu. Ben böyle yaptım. Fikir, tablodaki her satırın yanında bir görüntü bulundurmaktır (veritabanından PHP betiği tarafından oluşturulur). Bir resim tıklandığında, kullanıcı URL'ye yönlendirilir ve sonuç olarak, jQuery UI İletişim Kutusunda tıklanan kayıtla ilgili bazı veriler gösterilirken uygun kayıt veritabanından silinir.

JavaScript kodu:

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

İletişim kutusu div:

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

Resim bağlantısı:

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

Bu şekilde, PHP döngü değerlerini iletişim kutusuna aktarabilirsiniz. Tek dezavantajı, eylemi gerçekleştirmek için GET yöntemini kullanmaktır.

Buna ne dersin:

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

Bu html de test ettim:

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

Tüm li elemanını kaldırır, ihtiyaçlarınıza göre uyarlayabilirsiniz.

(03/22/2016 itibariyle, bağlantı verilen sayfadaki indirme işe yaramıyor. Geliştiricinin bir noktada düzeltmesi durumunda bağlantıyı burada bırakıyorum çünkü harika bir küçük eklenti. Orijinal gönderi takip ediyor. alternatif ve gerçekten çalışan bir bağlantı: jquery.confirm .)

İhtiyaçlarınız için çok basit olabilir, ancak bu jQuery onaylama eklentisini deneyebilirsiniz . Kullanımı gerçekten basittir ve çoğu durumda işi yapar.

Eval kullanmaktan nefret ettiğim kadar, farklı koşullara bağlı olarak çok fazla soruna neden olmadan, benim için en kolay yol gibi görünüyordu. Javascript settimeout işlevine benzer.

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

Buna kendim girdim ve burada birkaç cevaba benzeyen ancak biraz farklı bir çözüm buldum. Birçok javascript parçasını ya da bir yerlerde yer tutucu div'ı sevmedim. Daha sonra her kullanım için javascript eklemeden HTML'de kullanılabilecek genelleştirilmiş bir çözüm istedim. İşte ne geldi (bu jquery ui gerektirir):

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

  });

});

Ve sonra HTML'de javascript çağrıları veya referansları gerekmez:

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

Div özniteliği için title özniteliği kullanıldığından, kullanıcı düğmenin üzerine gelip onay sorusunu bile alabilir (bu yüzden döşemenin başlık özniteliğini kullanmadım). Onay penceresinin başlığı alt etiketinin içeriğidir. Javascript snip genelleştirilmiş bir .js içerisine dahil edilebilir ve sadece bir sınıf uygulayarak güzel bir onay penceresine sahip olursunuz.

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

NOT: Yorum yapmak için yeterli temsil değil, ancak BineG'nin cevabı, Homer ve echo tarafından vurgulanan ASPX sayfalarındaki geri gönderme sorunlarını çözmede mükemmel çalışıyor. Şerefte, dinamik bir iletişim kutusu kullanan bir varyasyon.

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

Kontrolün iki farklı html kontrolü olarak işleyen bir 'asp: linkbutton' ya da 'asp: button' olup olmadığını kontrol ettiği yukarıda belirtilen bir başka varyasyon. Benim için iyi çalışıyor gibi görünüyor ama kapsamlı bir şekilde test etmedim.

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

Bu bir ASP.NET Gridview (Komutlar içinde GridView Denetim derleme) içinde bağlantı düğmelerinde kullanmak için aradı Bu yüzden iletişim kutusundaki "Onayla" eylem çalışma zamanında Gridview denetimi tarafından oluşturulan bir komut dosyasını etkinleştirmek gerekiyor. bu benim için çalıştı:

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

Bu sorunun eski olduğunu biliyorum ama bu benim ilk kez bir onay iletişim kutusu kullanmak zorunda kaldım. Bunu yapmanın en kısa yolu olduğunu düşünüyorum.

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

Umarım beğenmişsindir :)

Şahsen bunu birçok ASP.Net MVC uygulamasının birçok görünümünde tekrarlayan bir gereklilik olarak görüyorum.

Bu yüzden bir model sınıfı ve kısmi bir görünüm tanımladım:

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

Kısmi görüşüm:

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

Ve sonra, bir görünümde her ihtiyacınız olduğunda, sadece @ Html.Partial (bölüm komut dosyalarında JQuery tanımlanacak şekilde yaptım) kullanın:

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

Hile, bir onay iletişim kutusu gerektiren öğelerle eşleşecek JQueryClickSelector belirtmektir. Benim durumumda, tüm SyLinkDelete sınıfıyla tutturur, ancak bir tanımlayıcı, farklı bir sınıf vb. Olabilir. Benim için bu bir listeydi:

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

Çok popüler bir konu ve google bunu "hangi olayın tıklandığı jquery iletişim kutusu kapat" sorgusu için bulur. Çözümüm EVET, HAYIR, ESC_KEY, X olaylarını düzgün işliyor. İletişim kutusunun nasıl atıldığı önemli değil, geri arama işlevimin çağrılmasını istiyorum.

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

Tarayıcıyı yeni bir URL'ye yeniden yönlendirmek veya işlev geri alma işleminde başka bir şey gerçekleştirmek kolaydır.

Burada çok iyi cevaplar var;) İşte benim yaklaşımım. Kullanımı değerlendirmek ().

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

Ve kullanım şöyle görünür:

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

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

Kutudan çıkar çıkmaz JQuery UI bu çözümü sunar:

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

JQuery işlevi için bir ad sağlayarak ve parametre olarak görüntülenmesini istediğiniz metni / başlığı ileterek bunu daha da özelleştirebilirsiniz.

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

Bu sorularınızın cevabı ...

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

1.4.4 jquery ve jquery.ui olduğundan emin olun

Javascript dokunuşuyla kolay yol

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