使用jqueryUI对话框模仿confirm() [英] Mimicking a confirm() using jqueryUI Dialog

问题描述

我想使用jQueryUI对话框模仿标准的JavaScript Confirm().我在想类似以下内容的方法，但是显然我不明白它应该如何工作.有什么建议?谢谢

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;}}
});

推荐答案

重复的确不是真正有用.对此我感到抱歉.

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

基于此答案，我会这样做:

• 创建一个函数，该函数将创建带有消息和确定/取消"按钮的基本模式对话框

• 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

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

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.

代码如下:

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

这篇关于使用jqueryUI对话框模仿confirm()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！