使用jqueryUI 对话框模仿confirm()

发布于 2024-12-27 19:21:42 字数 406 浏览 0 评论 0原文

我想使用 jQueryUI 对话框来模拟标准 JavaScript 确认（）。我正在考虑类似以下的事情，但我显然不明白它应该如何工作。有什么建议吗？谢谢

return $("#dialog-cancel").dialog("open");

$("#dialog-cancel").dialog({
    autoOpen: false,height: 400,width: 350,modal: true,
    open: function(event, ui){},
    buttons: {'OK': function(){$(this).dialog("close");return true;},'CANCEL': function() {$(this).dialog("close");return false;}}
});

原文

I would like to mimic a standard JavaScript confirm() using a jQueryUI dialog. I was thinking of something like the following, but I am obviously not understanding how it should work. Any suggestions? Thank you

return $("#dialog-cancel").dialog("open");

$("#dialog-cancel").dialog({
    autoOpen: false,height: 400,width: 350,modal: true,
    open: function(event, ui){},
    buttons: {'OK': function(){$(this).dialog("close");return true;},'CANCEL': function() {$(this).dialog("close");return false;}}
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

对你而言 2025-01-03 19:21:42

副本确实没什么用。我对此感到抱歉。

基于这个答案，我会做：

创建一个函数，该函数将创建一个基本模式对话框消息和确定/取消按钮
接受单击时执行的两个按钮的两个回调

好处是，它不会像答案中那样以无限循环阻塞整个浏览器。 jQuery UI 对话框的选项modal 只是阻止当前页面。

这是代码：

function confirmDialog(message, onOK, onCancel) {

    $('<div>' + message + '</div>').dialog({
        modal: true,
        buttons : {
            "OK" : function() { 
                $(this).dialog("close");

                // if there is a callback, execute it
                if (onOK && $.isFunction(onOK)) {
                    onOK();
                }

                // destroy the confirmation dialog
                $(this).dialog("destroy");
            },
            "Cancel" : function() {
                $(this).dialog("close");
                if (onCancel && $.isFunction(onCancel)) {
                    onCancel();
                }
                $(this).dialog("destroy");
            }
        }
    });

}

您可以这样使用它：

$('button').click(function(e) {

    var okHandler = function() {
        alert('ok');
    };

    confirmDialog('Do you really want ?', okHandler);
});

DEMO

The duplicate is not really useful indeed. I'm sorry for that.

Based on this answer, this what I would do:

create a function that will create a basic modal dialog with a message and OK/Cancel buttons
accept two callbacks for both buttons executed when they are clicked

The benefit is that it does not block the whole browser with an infinite loop like in the answer. The option modal of the jQuery UI dialog simply blocks the current page.

Here's the code:

function confirmDialog(message, onOK, onCancel) {

    $('<div>' + message + '</div>').dialog({
        modal: true,
        buttons : {
            "OK" : function() { 
                $(this).dialog("close");

                // if there is a callback, execute it
                if (onOK && $.isFunction(onOK)) {
                    onOK();
                }

                // destroy the confirmation dialog
                $(this).dialog("destroy");
            },
            "Cancel" : function() {
                $(this).dialog("close");
                if (onCancel && $.isFunction(onCancel)) {
                    onCancel();
                }
                $(this).dialog("destroy");
            }
        }
    });

}

And you can use it this way:

$('button').click(function(e) {

    var okHandler = function() {
        alert('ok');
    };

    confirmDialog('Do you really want ?', okHandler);
});

DEMO

回复收藏 0 原文

~没有更多了~