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

16 浏览
0 Comments

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

我正在尝试使用JQuery UI Dialog来替换丑陋的javascript:alert()弹窗。

在我的场景中，我有一个项目列表，每个项目旁边都有一个“删除”按钮。

伪html设置如下：


确定要删除吗？

在JQ部分，文档准备就绪时，我首先设置div为模态对话框，并为这些“a”设置点击事件，在删除之前进行确认，如下所示：

$("ul li a").click(function() {
  // 显示对话框    
  return false; // 防止浏览器实际跟随链接！
}

好的，问题来了。在初始化时，对话框不知道是谁（项目）会触发它，也不知道项目id。我该如何设置这些确认按钮的行为，以便如果用户仍然选择是，它将跟随链接进行删除操作？

0

3 答案

0 Comments

问题的原因是用户想要了解如何在jQuery UI对话框中实现“确认”对话框。解决方法是提供了一个自定义的函数来创建一个确认对话框，并提供了示例代码来展示如何使用这个函数。

以下是文章的整理内容：

在这个问题中，用户想要了解如何在jQuery UI对话框中实现“确认”对话框。他们提供了一个自定义的函数来创建一个确认对话框，并提供了示例代码来展示如何使用这个函数。

函数的代码如下：

function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
  $('
' + dialogText + '
').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');
      }
    }
  });
}

上述代码是一个自定义的函数，用于创建一个带有“确认”和“取消”按钮的对话框。它接受四个参数：对话框文本（dialogText），点击确认按钮后执行的函数（okFunc），点击取消按钮后执行的函数（cancelFunc）和对话框标题（dialogTitle）。函数内部通过调用jQuery UI的dialog()方法来创建对话框，并设置对话框的一些属性，如是否可拖动（draggable）、是否模态（modal）、是否可调整大小（resizable）、宽度（width）、标题（title）和最小高度（minHeight）。对话框的按钮通过一个对象来定义，其中键表示按钮的文本，值表示点击按钮后执行的函数。这些函数通过setTimeout()方法设置了一个延迟时间，以确保在关闭对话框之前执行。最后，调用$(this).dialog('destroy')来销毁对话框。

示例代码如下：

myConfirm('Do you want to delete this record ?', function () {
  alert('You clicked OK');
}, function () {
  alert('You clicked Cancel');
}, 'Confirm Delete');

上述代码展示了如何使用自定义的确认对话框函数。函数的第一个参数是对话框的文本，第二个参数是点击确认按钮后执行的函数，第三个参数是点击取消按钮后执行的函数，最后一个参数是对话框的标题。

0
0 Comments

问题的出现原因是Paul给出的答案中，在点击事件中设置选项的方式是错误的。以下是我自己的代码，它可以正常工作。我没有将其调整为与Paul的示例匹配，但在某些元素的命名上有细微差别。你应该能够理解。修正是在点击事件中设置对话框选项的setter中。

解决方案的代码如下：

$(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");
    });
});

希望这能对其他人有所帮助，因为这篇帖子最初引导了我正确的方向，所以我觉得我最好发布这个修正。

我没有看到你做了什么与Paul的答案不同的事情。

对我来说看起来很好。唯一建议的是使用on而不是click，因为如果使用jQuery重新绘制字段，这将继续工作。

0
0 Comments

问题的出现原因：

在使用Jquery UI对话框实现“确认”对话框时，需要部分初始化对话框，并且将目标URL注入到确认按钮的事件处理程序中。为了实现多个链接的确认功能，需要在所需链接的点击事件处理程序中进行初始化。此外，使用CSS类可以指示哪些链接应具有确认行为。

解决方法：

以下是一个抽象的解决方案示例：


  Are you sure about this?



Click here
Or, you could click here

如果可以为链接生成CSS类（在我的示例中是`confirmLink`），我相信这个解决方案适用于您。

备注：在stackoverflow上提供了一个相似的答案，链接为：https://stackoverflow.com/questions/878710

此外，还有一些其他讨论问题的评论，例如如何解决在UpdatePanel中导致完全Postback的问题以及如何处理禁用JavaScript时的操作确认。还有一个问题是如何更改对话框的ID以便可以使用多个对话框。

0