Как реализовать диалог подтверждения в диалоге Jquery UI?

Я пытаюсь использовать JQuery UI Dialog, чтобы заменить уродливое javascript:alert()поле. В моем сценарии у меня есть список элементов, и рядом с каждым из них у меня будет кнопка «удалить» для каждого из них. настройка psuedo html будет выглядеть следующим образом:

<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, когда документ готов, я сначала настроил бы div на модальное диалоговое окно с необходимой кнопкой, а затем установил те «a», чтобы вызвать подтверждение перед удалением, например:

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

ОК, вот в чем проблема. во время инициализации диалог не будет знать, кто (элемент) запустит его, а также идентификатор элемента (!). Как я могу настроить поведение этих кнопок подтверждения, чтобы, если пользователь все еще выбирал ДА, он перешел по ссылке, чтобы удалить его?

Я просто должен был решить ту же проблему. Ключом к тому, чтобы заставить это работать, было то, что он dialogдолжен быть частично инициализирован в clickобработчике событий для ссылки, с которой вы хотите использовать функцию подтверждения (если вы хотите использовать это для более чем одной ссылки). Это связано с тем, что целевой URL для ссылки должен быть вставлен в обработчик событий для нажатия кнопки подтверждения. Я использовал класс CSS, чтобы указать, какие ссылки должны иметь подтверждающее поведение.

Вот мое решение, абстрагированное, чтобы подойти для примера.

<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 ( confirmLinkв моем примере).

Вот jsfiddle с кодом в нем.

В интересах полного раскрытия я отмечу, что я потратил несколько минут на эту конкретную проблему, и я дал аналогичный ответ на этот вопрос , который также был без принятого ответа в то время.

Я обнаружил, что ответ Пола не совсем сработал, поскольку способ, которым он устанавливал параметры ПОСЛЕ диалогового окна при событии click, был неверным. Вот мой код, который работал. Я не адаптировал его под пример Пола, но разница только в том, что некоторые элементы названы по-разному. Вы должны быть в состоянии решить это. Коррекция находится в установщике опции диалога для кнопок на событии щелчка.

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

    });

});

Надеюсь, что это поможет кому-то еще, так как этот пост изначально помог мне выбрать правильный путь, я подумал, что лучше опубликовать исправление.

Я создал свою собственную функцию для диалога подтверждения пользовательского интерфейса jquery. Вот код

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

Теперь, чтобы использовать это в своем коде, просто напишите следующее

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

Продолжай.

Простое и короткое решение, которое я только что попробовал, и оно работает

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

тогда просто добавьте class = "подтвердите" к вашей ссылке, и это работает!

Это моё решение .. надеюсь, оно кому-нибудь поможет. Она написана на лету, а не копировалась, так что прости меня за любые ошибки.

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

Лично я предпочитаю это решение :)

редактировать: извините .. я действительно должен был объяснить это более подробно. Мне это нравится, потому что, на мой взгляд, это элегантное решение. Когда пользователь нажимает кнопку, которая должна быть подтверждена первой, событие отменяется, как и должно быть. Когда нажата кнопка подтверждения, решение состоит не в том, чтобы смоделировать щелчок по ссылке, а в том, чтобы вызвать то же самое собственное событие jquery (щелчок) для исходной кнопки, которая сработала бы, если бы не было диалогового окна подтверждения. Единственным отличием является другое пространство имен событий (в данном случае «подтверждено»), поэтому диалоговое окно подтверждения больше не отображается. Собственный механизм Jquery может затем вступить во владение, и все может работать как ожидалось. Еще одним преимуществом является то, что он может быть использован для кнопок и гиперссылок. Я надеюсь, что я был достаточно ясен.

Я знаю, что это старый вопрос, но вот мое решение с использованием атрибутов данных HTML5 в MVC4:

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

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

Будет ли это делать?

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

Как указано выше. Предыдущие посты вывели меня на правильный путь. Вот как я это сделал. Идея состоит в том, чтобы рядом с каждой строкой таблицы было изображение (генерируемое скриптом PHP из базы данных). При нажатии на изображение пользователь перенаправляется на URL-адрес, и в результате соответствующая запись удаляется из базы данных, показывая некоторые данные, относящиеся к нажатой записи, в диалоге пользовательского интерфейса jQuery.

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

Диалог div:

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

Ссылка на изображение:

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

Таким образом, вы можете передать значения цикла PHP в диалоговое окно. Единственным недостатком является использование метода GET для фактического выполнения действия.

Как насчет этого:

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

Я проверил это в этом HTML:

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

Он удаляет весь элемент li, вы можете адаптировать его под свои нужды.

(По состоянию на 22.03.2016 загрузка на странице, на которую указывает ссылка, не работает. Я оставляю ссылку здесь на случай, если разработчик исправит ее в какой-то момент, потому что это отличный маленький плагин. Оригинальный пост следует. альтернатива, и ссылка, которая действительно работает: jquery.confirm .)

Это может быть слишком просто для ваших нужд, но вы можете попробовать этот плагин подтверждения jQuery . Он действительно прост в использовании и выполняет свою работу во многих случаях.

Как бы мне не хотелось использовать eval, мне показалось, что это самый простой способ, не вызывающий много проблем в зависимости от различных обстоятельств. Похоже на функцию времени ожидания 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>

Я сам столкнулся с этим и получил решение, которое похоже на несколько ответов, но реализовано несколько иначе. Мне не нравилось много кусочков JavaScript или местный тег div. Я хотел обобщенное решение, которое затем можно было бы использовать в HTML без добавления JavaScript для каждого использования. Вот что я придумал (для этого требуется 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");
        }
      }
    });

  });

});

Кроме того, в HTML не требуется никаких вызовов или ссылок на JavaScript:

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

Поскольку атрибут title используется для содержимого div, пользователь может даже получить вопрос подтверждения, наведя курсор на кнопку (именно поэтому я не использовал атрибут title для плитки). Заголовок окна подтверждения является содержимым тега alt. Фрагмент javascript можно включить в обобщенный файл .js, и просто применив класс, у вас появится симпатичное окно подтверждения.

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

ПРИМЕЧАНИЕ. Недостаточно повторений, чтобы комментировать, но ответ BineG отлично подходит для решения проблем обратной передачи на страницах ASPX, как это подчеркивали Гомер и Эхо. В честь, вот вариант с использованием динамического диалога.

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

Другой вариант вышеупомянутого, где он проверяет, является ли элемент управления «asp: linkbutton» или «asp: button», который визуализируется как два разных html-элемента управления. Кажется, работает хорошо для меня, но не проверял это экстенсивно.

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

Я искал это для использования на кнопках ссылок в ASP.NET Gridview (сборка элемента управления GridView в командах). Поэтому действие «Подтвердить» в диалоговом окне должно активировать сценарий, сгенерированный элементом управления Gridview во время выполнения. это сработало для меня:

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

Я знаю, что этот вопрос старый, но я впервые использовал диалог подтверждения. Я думаю, что это самый короткий способ сделать это.

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

Я надеюсь тебе это понравится :)

Лично я вижу это как повторяющееся требование во многих представлениях многих приложений ASP.Net MVC.

Вот почему я определил класс модели и частичное представление:

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

И мой частичный взгляд:

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

И затем, каждый раз, когда вам это нужно в представлении, вы просто используете @ Html.Partial (он делал это в скриптах разделов, чтобы определить JQuery):

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

Хитрость заключается в том, чтобы указать JQueryClickSelector, который будет соответствовать элементам, для которых требуется диалог подтверждения. В моем случае все якоря с классом SyLinkDelete, но это может быть идентификатор, другой класс и т. Д. Для меня это был список:

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

Очень популярная тема, и Google находит это для запроса "jquery диалог закрыть, какое событие было нажато". Мое решение правильно обрабатывает события YES, NO, ESC_KEY, X. Я хочу, чтобы моя функция обратного вызова вызывалась независимо от расположения диалога.

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

Легко перенаправить браузер на новый URL-адрес или выполнить что-то еще в функции retval.

Здесь так много хороших ответов;) Вот мой подход. Похоже на использование 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'
            }
        ]
    });     
}

И использование выглядит так:

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

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

Из коробки пользовательский интерфейс JQuery предлагает следующее решение:

$( 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 и передав текст / заголовок, который вы хотите отобразить в качестве параметра.

Ссылка: https://jqueryui.com/dialog/#modal-confirmation

Ну, это ответ на ваши вопросы ...

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

убедитесь, что у вас есть jquery 1.4.4 и jquery.ui

Простой способ с оттенком 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();
}