使用jqueryUI对话框模仿confirm()

use*_*531 3 jquery jquery-ui-dialog

我想使用jQueryUI对话框模仿标准的JavaScript confirm().我在考虑以下内容,但我显然不明白它应该如何运作.有什么建议?谢谢

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;}}
});
Run Code Online (Sandbox Code Playgroud)

Did*_*hys 5

副本确实没用.对不起,我很抱歉.

根据这个答案,我会这样做:

  • 创建一个函数,创建一个带有消息和OK/Cancel按钮的基本模态对话框

  • 对单击它们时执行的两个按钮接受两个回调

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

这是代码:

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

}
Run Code Online (Sandbox Code Playgroud)

你可以这样使用它:

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

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

    confirmDialog('Do you really want ?', okHandler);
});
Run Code Online (Sandbox Code Playgroud)

DEMO