如何在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() {

    $("#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) {

  $('<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'

);

继续。