Jquery UI 대화 상자에서 "확인"대화 상자를 구현하는 방법은 무엇입니까?

JQuery UI 대화 상자를 사용하여 못생긴 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!
}

자, 여기 문제가 있습니다. 초기화 시간 동안 대화 상자는 누가 (항목) 그것을 실행할지 알지 못하며 항목 ID (!)도 알 수 없습니다. 사용자가 여전히 YES를 선택한 경우 링크를 따라 제거하기 위해 확인 버튼의 동작을 어떻게 설정할 수 있습니까?

방금 같은 문제를 해결해야했습니다. 이 기능을 사용하려면 확인 기능을 사용하려는 링크 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 이 있습니다.

전체 공개를 위해이 특정 문제에 대해 몇 분을 보냈으며이 질문에 대해 비슷한 대답을 했으며 당시에는 대답이 없었습니다.

클릭 이벤트에서 대화 상자가 인스턴스화 된 후 옵션을 설정하는 방식으로 Paul의 대답이 제대로 작동하지 않는다는 것을 알았습니다. 작동하는 코드는 다음과 같습니다. 나는 폴의 예에 맞도록 그것을 조정하지 않았지만 일부 요소의 관점에서 고양이 수염의 차이는 다른 이름입니다. 당신은 그것을 해결할 수 있어야합니다. 클릭 이벤트의 버튼에 대한 대화 상자 옵션 설정에 수정이 있습니다.

$(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 ui confirm 대화 상자에 대한 자체 함수를 만들었습니다. 여기 코드가 있습니다

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 = "confirm"을 추가하면 작동합니다!

이것이 나의 해결책이다. 나는 그것이 누군가를 돕기를 바란다. 그것은 복사 붙여 넣지 않고 즉석에서 작성되었으므로 실수를 저를 용서하십시오.

$("#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 기본 메커니즘이 대신하여 예상대로 작업을 수행 할 수 있습니다. 또 다른 장점은 버튼과 하이퍼 링크에 사용될 수 있다는 것입니다. 내가 충분히 명확했으면 좋겠다

나는 이것이 오래된 질문이라는 것을 알고 있지만 MVC4에서 HTML5 데이터 속성 을 사용하는 솔루션은 다음과 같습니다.

<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 UI 대화 상자에서 클릭 한 레코드와 관련된 일부 데이터를 표시하면서 데이터베이스에서 적절한 레코드가 삭제됩니다.

자바 스크립트 코드 :

$(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 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 요소를 제거하여 필요에 따라 조정할 수 있습니다.

(2016 년 3 월 22 일 현재 링크 된 페이지의 다운로드가 작동하지 않습니다. 개발자가 플러그인이 아주 작기 때문에 어느 시점에서 수정하는 경우 여기에 링크를 남겨두고 있습니다. 원래 게시물은 다음과 같습니다. 대안 및 실제로 작동하는 링크 : jquery.confirm )

귀하의 요구에 비해 너무 간단 할 수 있지만이 jQuery confirm plugin을 사용해보십시오 . 사용이 정말 간단하고 많은 경우에 작업을 수행합니다.

eval을 사용하는 것을 싫어하는 한 다른 상황에 따라 많은 문제를 일으키지 않고 가장 쉬운 방법처럼 보였습니다. 자바 스크립트 settimeout 함수와 유사합니다.

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

나는 이것을 직접 만났고 여기에 몇 가지 대답과 비슷하지만 약간 다르게 구현 된 솔루션으로 끝났습니다. 자바 스크립트 나 플레이스 홀더 div가 마음에 들지 않았습니다. 나는 일반화 된 솔루션을 원했다.이 솔루션은 각 용도에 자바 스크립트를 추가하지 않고 HTML로 사용할 수 있습니다. 여기에 내가 생각해 낸 것이 있습니다 (jquery ui가 필요합니다).

자바 스크립트 :

$(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에서는 자바 스크립트 호출이나 참조가 필요하지 않습니다.

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

제목 속성이 div 컨텐츠에 사용되므로 사용자는 버튼 위로 마우스를 가져 가서 확인 질문을받을 수도 있습니다 (타일의 제목 속성을 사용하지 않은 이유). 확인 창의 제목은 alt 태그의 내용입니다. javascript snip은 일반 .js include에 포함될 수 있으며 클래스를 적용하면 예쁜 확인 창이 나타납니다.

$("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 dialog close which event clicked"쿼리에 대해이 항목을 찾습니다. 내 솔루션은 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 UI는이 솔루션을 제공합니다.

$( 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가 있는지 확인하십시오

자바 스크립트를 터치하여 쉬운 방법

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