如何在 Jquery UI 对话框中实现“确认”对话框？
Posted
技术标签:
【中文标题】如何在 Jquery UI 对话框中实现“确认”对话框？【英文标题】：How to implement "confirmation" dialog in Jquery UI dialog? 【发布时间】：2010-10-27 14:04:16 【问题描述】：我正在尝试使用 JQuery UI Dialog 来替换丑陋的 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（！）。如何设置这些确认按钮的行为，以便如果用户仍然选择“是”，它将按照链接删除它？
【问题讨论】：
这里有一个易于使用的插件：***.com/questions/6457750/form-confirm-before-submit Looooong 搜索解决方案：***.com/a/18474005/1876355 【参考方案1】：我只需要解决同样的问题。让它工作的关键是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，其中包含代码。
为了全面披露，我会注意到我在这个特定问题上花了几分钟时间，我向this question 提供了类似的答案，当时也没有公认的答案。
【讨论】：
+1 几乎可以工作......但请参阅@lloydphillips 的回答以进行更正 有没有其他人注意到这会导致 UpdatePanel 内出现完整的 PostBack？你如何解决这个问题？ 这个答案和@lloydphillips 的答案对我来说不太合适。原始问题涉及“删除”按钮（链接）。通常，不建议将链接 (HTTP GET) 用于更改状态的操作（例如 DELETE）。这两个答案都假定用户启用了 javascript。如果 javascript 被禁用，链接将触发并且删除（或任何其他）操作将在没有确认的情况下触发，这可能是灾难性的。我希望找到一个解决这个问题的答案。 @echo：我也是这么想的。为了使它正确，我认为必须有另一个页面要求确认 JS 是否被禁用。如果JS这个页面可以省略。也许通过另一个获取参数，如确认 = true。考虑到有和没有 JS 的情况真的很难而且很麻烦。 Web 开发一团糟。 @sree 当然。您可以提取一个函数，该函数将 id 的名称用作参数并进行 jQuery 调用来为传入的 id 设置事件处理程序。【参考方案2】：我发现 Paul 的答案不太有效，因为他在 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");
);
);
希望这对其他人有所帮助，因为这篇文章最初让我走上了正确的轨道，我认为我最好发布更正。
【讨论】：
我没有看到你所做的与保罗的回答不同。 我觉得不错。我唯一会建议的是使用on 而不是click，因为如果（例如）使用jQuery 重绘该字段，这将继续有效 - api.jquery.com/on
哈哈“猫胡须的区别”——我需要更多地使用这个短语。【参考方案3】：
我为 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 url 获取和快速显示的非常相似... function JQueryDialog(url) $("#dialog").remove(); $("body").append(""); $("#dialog").load(url).dialog( resizable: false, width: 770, height: 470, modal: true, buttons : "Close" : function () $(this).dialog( "关闭"); $("#dialog").remove(); ); 能否请您逐行解释您的 myconfirm 函数是如何工作的。我是 javascript 的新手，其中一些我了解，有些我不了解。谢谢【参考方案4】：我刚刚尝试过的简单而简短的解决方案，它有效
$('.confirm').click(function()
$(this).removeClass('confirm');
$(this).text("Sure?");
$(this).unbind();
return false;
);
然后只需将 class="confirm" 添加到您的链接即可！
【讨论】：
.text 消息询问“确定吗？”但没有选择是/否，确定/取消。用户如何表明他们是“确定”还是“不确定”？【参考方案5】：这是我的解决方案.. 我希望它可以帮助任何人。它是即时写的，而不是复制粘贴的，如有错误请见谅。
$("#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 原生机制可以接管，事情可以按预期运行。 另一个优点是它可以用于按钮和超链接。我希望我已经足够清楚了。
【讨论】：
考虑编辑您的帖子并告诉社区您为什么喜欢此解决方案。是什么让你觉得更好？ 我编辑了这篇文章。我希望它现在更有意义。当我写它时，它似乎很清楚，没有必要发表评论。一段时间后我重新访问它时有什么不同...... :) 一个非常干净的解决方案！以前从未读过事件命名空间。谢谢！ 美丽！ “..但要在原始按钮上触发相同的原生 jquery 事件（单击）..”听起来 beauutifullll!! 感谢$("#btn").trigger("click.confirmed");【参考方案6】：
我知道这是一个老问题，但这是我在 MVC4 中使用 HTML5 data attributes 的解决方案：
<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。【参考方案7】：这样可以吗？
$("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 的人会完全错过链接。再次感谢您的出色回复。【参考方案8】：如上。以前的帖子让我走上了正轨。我就是这样做的。 这个想法是在表中的每一行旁边都有一个图像（由数据库中的 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" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>
这样您可以将 PHP 循环值传递到对话框中。 唯一的缺点是使用 GET 方法来实际执行操作。
【讨论】：
【参考方案9】：这个怎么样：
$("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 元素，您可以根据需要对其进行调整。
【讨论】：
【参考方案10】：（截至 2016 年 3 月 22 日，链接到的页面上的下载不起作用。我将链接留在这里，以防开发人员在某个时候修复它，因为它是一个很棒的小插件。原始帖子如下。另一种选择，以及一个实际有效的链接：jquery.confirm。）
这可能对您的需求来说太简单了，但您可以试试这个jQuery confirm plugin。它使用起来非常简单，而且在很多情况下都能胜任。
【讨论】：
该链接将我引导至链接的个人资料。除非您是高级链接会员，否则您似乎看不到该插件。 我更新了链接，让它再次工作。开发人员必须将旧链接重定向到她的 LinkedIn 个人资料。如果她再次更改它，那么只需使用“jquery confirm plugin nadia”进行谷歌搜索。 谢谢！虽然我现在已经实现了我的版本，但我仍然会看看。 链接又失效了【参考方案11】：尽管我讨厌使用 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>
【讨论】：
【参考方案12】：我自己遇到了这个问题，最终得到了一个解决方案，类似于这里的几个答案，但实现方式略有不同。我不喜欢很多 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"
title="Are you sure?">Test</a>
由于标题属性用于 div 内容，用户甚至可以通过将鼠标悬停在按钮上来获得确认问题（这就是为什么我没有使用磁贴的标题属性的原因）。确认窗口的标题是 alt 标签的内容。 javascript snip 可以包含在一个通用的 .js 包含中，并且只需应用一个类，您就有一个漂亮的确认窗口。
【讨论】：
【参考方案13】：我知道这个问题很老，但这是我第一次不得不使用确认对话框。我认为这是最短的方法。
$(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;
);
希望你喜欢 :)
【讨论】：
【参考方案14】：非常受欢迎的主题，谷歌发现这个用于“jquery dialog close which event was 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 上执行其他操作。
【讨论】：
【参考方案15】：$("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;
);
【讨论】：
【参考方案16】：注意：没有足够的代表发表评论，但 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();
);
【讨论】：
【参考方案17】：上面的另一个变体，它检查控件是呈现为两个不同 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");
);
【讨论】：
【参考方案18】：我一直在寻找这个用于 ASP.NET Gridview 中的链接按钮（GridView Control build in Commands） 所以对话框中的“确认”动作需要激活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); 这根本没有意义！跨度>
【参考方案19】：
我个人认为这是在许多 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" src="/Images/DeleteHS.png" border="0">
</a>
【讨论】：
带有 jQuery 的 ASP.Net MVC。【参考方案20】：这里有很多好的答案；） 这是我的方法。类似于 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']);
【讨论】：
【参考方案21】：开箱即用的 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
【讨论】：
【参考方案22】：这就是你问题的答案...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Santa Luisa</TITLE>
<style>
bodymargin: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%" >
<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;"> 298 </font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas sadsadas </font> </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> </td><td> </td></TR><TR align="center"><TD>12/22/2010 </TD><TD>298 </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 </TD><TD>298 </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）与原始问题完全无关。您绝对应该缩短和美化您的代码，并专注于回答原始问题。【参考方案23】：
使用 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();
【讨论】：
重点是避免使用默认的javascript函数alert/confirm等，所以这不是问题的解决方案。【参考方案24】：<input type="button" value="Delete" onclick="Delete(@item.id)" / >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
function Delete(id)
if (confirm("Are you sure ?") == true)
$.get("/Stud/StudDelete",
id: id
, function(res)
if (res)
location.reload();
);
</script>
【讨论】：
您能否在答案中提供问题所在，以及您采取了哪些措施来解决它？只有代码的答案并不能解释那么多。另外，这个问题已经有 27 个答案了，那么这个答案在已有的基础上增加了什么？以上是关于如何在 Jquery UI 对话框中实现“确认”对话框？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery UI 对话框 - 使用 Firefox 时出现问题