如何在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 part中，在文档就绪时，我会首先将div设置为带有必要按钮的模式对话框，并在删除之前将那些要触发的"a“设置为确认，例如：
$("ul li a").click(function() {
// Show the dialog
return false; // to prevent the browser actually following the links!
}好了，问题来了。在初始化期间，对话框将不知道谁(项目)将启动它，也不知道项目id (!)。我如何设置这些确认按钮的行为，以便在用户仍然选择YES的情况下，它会跟随链接将其删除？
回答 24
Stack Overflow用户
发布于 2009-06-09 22:33:12
我只是不得不解决同样的问题。实现此功能的关键在于，必须在click事件处理程序中为要使用确认功能的链接部分初始化dialog (如果要将此功能用于多个链接)。这是因为必须将链接的目标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提供了一个类似的答案，当时也没有一个公认的答案。
Stack Overflow用户
发布于 2009-11-19 05:36:40
我发现Paul的回答不太有效，因为他在click事件上实例化对话框后设置选项的方式是不正确的。这是我的代码，它正在工作。我并没有根据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");
});
});希望这篇文章能对其他人有所帮助，因为这篇文章最初让我走上了正确的道路，我想我最好还是发表更正吧。
Stack Overflow用户
发布于 2012-01-17 19:22:39
我已经为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'
);去吧。
https://stackoverflow.com/questions/887029
复制相似问题