如何在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

您应该能够解决它。更正是在单击事件的按钮的对话框选项的设置器中。$(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");    });});希望这对其他人有所帮助，因为本文最初使我走上了正确的轨道，我认为我最好发布更正。

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');继续。