如何在Jquery UI对话框中实现“确认”对话框?


148

我尝试使用JQuery UI对话框替换丑陋的javascript:alert()框。在我的场景中,我有一个项目列表,在每个项目旁边,我将为每个项目都具有一个“删除”按钮。伪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(!)。我如何设置那些确认按钮的行为,以便在用户仍然选择“是”的情况下,将通过该链接将其删除?



1
Looooong寻找解决方案: stackoverflow.com/a/18474005/1876355
Pierre

Answers:


166

我只需要解决同样的问题。使其起作用的关键在于,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

在充分披露的利益,我会注意到,我花在这方面的问题了几分钟,我提供了一个类似的答案,这个问题,这也是没有当时是一个公认的答案。


2
+1几乎可以使用...但是请参阅@lloydphillips的答案以进行更正
rohancragg

还有其他人注意到这会在UpdatePanel中引起完整的PostBack吗?您如何解决?
荷马

3
关于这个答案和@lloydphillips的答案有些东西对我来说还不够。最初的问题是关于“删除”按钮(链接)的。通常,建议不要将链接(HTTP GET)用于更改状态的操作(例如DELETE)。这两个答案均假定用户已启用javascript。如果禁用了javascript,则链接将被触发,而delete(或其他任何操作)将在未经确认的情况下被触发,这可能是灾难性的。我希望找到一个解决此问题的答案。
回声

@echo:我也想过。为了使它正确,我认为必须有另一个页面要求确认是否禁用了JS。如果是JS,则可以省略此页面。也许通过另一个get参数,例如Confirmed = true。考虑到有和没有JS的情况,确实非常麻烦。Web开发一团糟。
robsch 2012年

1
@sree当然。您可以提取一个函数,该函数使用id的名称作为参数,并进行jQuery调用以为传入的id设置事件处理程序。
保罗·莫里

59

我发现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");

    });

});

希望这对其他人有所帮助,因为本文最初使我走上了正确的轨道,我认为我最好发布更正。


1
我没有看到您所做的与Paul的回答有所不同。
Grant Birchmeier

2
在我看来很好。我唯一要接受的是on代替click,因为如果(例如)使用jQuery重绘该字段,该字段将继续起作用-api.jquery.com/on
Aaron Newton

1
哈“猫的晶须的区别”-我需要更多地使用该短语。
乍得·高辛2014年

27

我为jquery ui确认对话框创建了自己的函数。这是代码

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

继续。


这是一个很好的解决方案,它与我用于ajax网址获取和快速显示的我的网址非常相似... function JQueryDialog(url){$(“#dialog”)。remove(); $(“ body”)。append(“ <div id ='dialog'title ='www.mysite.com'> </ div>”); $(“#dialog”)。load(url).dialog({可调整大小:false,宽度:770,高度:470,模式:true,按钮:{“关闭”:函数(){$(this).dialog( “”关闭“); $(”#dialog“)。remove();}}}); }
conners 2012年

6

我刚刚尝试过的简单快捷的解决方案

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

然后只需将class =“ confirm”添加到您的链接中即可使用!


.text消息询问“确定吗?” 但没有选择是/否,确定/取消。用户如何指示他们“确定”还是“不确定”?
Genki

6

这是我的解决方案。我希望它能对任何人有所帮助。它是即时写的,而不是复制粘贴的,所以请原谅我的任何错误。

$("#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本机机制可以接管一切,并且事情可以按预期运行。另一个优点是它可以用于按钮和超链接。我希望我足够清楚。


考虑编辑您的帖子,并告诉社区您为什么更喜欢此解决方案。是什么让它对您更好?
模糊逻辑

我编辑了帖子。我希望现在更有意义。当我写它的时候,似乎很明显,没有必要发表评论。一段时间后重新访问它有什么不同... :)
BineG

一个非常干净的解决方案!以前从未阅读过事件名称空间。感谢那!
griffla 2012年

美丽!“ ..但是要在原始按钮上触发相同的本地jquery事件(单击)。”听起来很漂亮! 感谢 $("#btn").trigger("click.confirmed");
IRF

4

我知道这是一个老问题,但这是我在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");
});

我喜欢这个解决方案,谢谢。易于理解,为我工作。我没有使用@ Url.Action部分,但是它可以与服务器端MVC(PHP / Symfony2)生成的URL一起使用。
fazy 2013年

3

这样可以吗

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

感谢您的回复。我敢肯定,我会对其进行测试(但它看起来很有用)。我从许多答案中看到的问题之一是缺乏通用性。如果页面上有另一组需要确认的控件(或链接等),似乎我们需要在交互/操作上进行多次声明。旧的javascript方式,即href =“ javascript:confirm('link_url');” 简单而优雅,适合所有类似情况。当然,javascript方法太过引人注目,以至于没有javascript的人们将完全错过链接。再次感谢您的好评。
xandy

3

如上。以前的帖子使我走上了正轨。这就是我做到的方式。想法是在表的每一行旁边都有一个图像(由PHP脚本从数据库生成)。单击图像时,用户将被重定向到URL,因此,将从适当的记录中删除该记录,同时在jQuery UI对话框中显示一些与该记录相关的数据。

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方法实际执行操作。


2

这个怎么样:

$("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元素,您可以根据需要对其进行调整。


2

(从2016年3月22日起,链接到的页面上的下载不起作用。如果开发人员在某个时候修复了该链接,因为它是一个很棒的小插件,因此我将其保留在此处。原始帖子如下。另一种方法,以及实际有效的链接:jquery.confirm。)

对于您的需求而言,它可能太简单了,但是您可以尝试使用此jQuery确认插件。它真的很容易使用,并且在很多情况下都能胜任。


该链接将我定向到一个链接的个人资料。除非您是高级链接会员,否则您似乎看不到插件。
Zane 2014年

我更新了链接,因此它可以再次工作。开发人员必须将旧链接重定向到她的LinkedIn个人资料。如果她再次更改它,则只需使用“ jquery确认插件nadia”对其进行Google搜索。
grahamesd 2014年

谢谢!虽然现在已经实现了我的版本,但我仍然会看一看。
Zane 2014年

链接再次
消失

1

尽管我不喜欢使用eval,但对于我来说,这似乎是最简单的方法,不会因不同的情况而导致很多问题。与javascript 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>

1

我自己遇到了这个问题,并最终找到了一个解决方案,该解决方案与此处的几个答案类似,但实现方式略有不同。我不喜欢很多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内容,因此用户甚至可以通过将鼠标悬停在按钮上来获得确认问题(这就是为什么我不使用tile的title属性的原因)。确认窗口的标题是alt标签的内容。可以将javascript片段包含在通用的.js include中,只需应用一个类,即可获得一个漂亮的确认窗口。


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

0

注意:没有足够的意见来发表评论,但是BineG的答案非常适合解决Homer和echo突出显示的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();  
});

0

上面的另一个变体,它检查控件是呈现为两个不同html控件的'asp:linkbutton'还是'asp:button'。似乎对我来说很好,但还没有对其进行广泛的测试。

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

0

我一直在寻找在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");
             }
         }
     });
 });

eval()可能有害!顺便说一句,我必须引用您的代码的这一部分:var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);这根本没有道理!
Sk8erPeter

0

我知道这个问题很旧,但这是我第一次必须使用确认对话框。我认为这是最短的方法。

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

我希望你喜欢它 :)


0

我个人认为这是许多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>

带有jQuery的ASP.Net MVC。
Frederick Samson 2014年

0

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上执行其他操作很容易。


0

这里有很多好的答案;)这是我的方法。与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']);
}

0

开箱即用的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


-1

好吧,这就是您的问题的答案...

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


这是我多年来看到的最丑陋的代码之一。您使用已弃用的属性(如LANGUAGE="JavaScript"),混合使用大写和小写字符,将纯JS代码与jQuery代码完全不必要地混合,并使用JS而不是CSS设置样式(丑陋且语义上不正确),顺便说一下,您的样式修改(使用普通JS)与原始问题绝对无关。您绝对应该缩短和美化您的代码,并专注于回答原始问题。
Sk8erPeter

-1

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

2
关键是要避免使用默认的javascript函数alert / confirm等,因此这不是解决问题的方法。
redreinard
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.