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

Question

我尝试使用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（！）。我如何设置那些确认按钮的行为，以便在用户仍然选择“是”的情况下，将通过该链接将其删除？

Answer 1

我发现Paul的答案不太有效，因为在单击事件实例化对话框之后，他设置选项的方式不正确。这是我的代码正在工作。我没有量身定制它来适应Paul的例子，但这只是猫的胡须的区别，因为某些元素的命名不同。您应该能够解决它。更正是在单击事件的按钮的对话框选项的设置器中。$(document).ready(function() {&nbsp; &nbsp; $("#dialog").dialog({&nbsp; &nbsp; &nbsp; &nbsp; modal: true,&nbsp; &nbsp; &nbsp; &nbsp; bgiframe: true,&nbsp; &nbsp; &nbsp; &nbsp; width: 500,&nbsp; &nbsp; &nbsp; &nbsp; height: 200,&nbsp; &nbsp; &nbsp; &nbsp; autoOpen: false&nbsp; &nbsp; });&nbsp; &nbsp; $(".lb").click(function(e) {&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; var theHREF = $(this).attr("href");&nbsp; &nbsp; &nbsp; &nbsp; $("#dialog").dialog('option', 'buttons', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Confirm" : function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.location.href = theHREF;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Cancel" : function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).dialog("close");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $("#dialog").dialog("open");&nbsp; &nbsp; });});希望这对其他人有所帮助，因为本文最初使我走上了正确的轨道，我认为我最好发布更正。

Answer 2

我为jquery ui确认对话框创建了自己的函数。这是代码function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {&nbsp; $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({&nbsp; &nbsp; draggable: false,&nbsp; &nbsp; modal: true,&nbsp; &nbsp; resizable: false,&nbsp; &nbsp; width: 'auto',&nbsp; &nbsp; title: dialogTitle || 'Confirm',&nbsp; &nbsp; minHeight: 75,&nbsp; &nbsp; buttons: {&nbsp; &nbsp; &nbsp; OK: function () {&nbsp; &nbsp; &nbsp; &nbsp; if (typeof (okFunc) == 'function') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(okFunc, 50);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $(this).dialog('destroy');&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; Cancel: function () {&nbsp; &nbsp; &nbsp; &nbsp; if (typeof (cancelFunc) == 'function') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(cancelFunc, 50);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $(this).dialog('destroy');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });}现在在您的代码中使用它，只需编写以下内容myConfirm('Do you want to delete this record ?', function () {&nbsp; &nbsp; alert('You clicked OK');&nbsp; }, function () {&nbsp; &nbsp; alert('You clicked Cancel');&nbsp; },&nbsp; 'Confirm Delete');继续。