Question

我想创建一个类似于confirm()的JavaScript函数，它显示一个对话框（带有问题的div和2个按钮），如果用户点击“Ok”或{{1，则返回true否则。

是否可以使用JavaScript / jQuery但没有插件（例如jQuery UI或Dialog）？因为我正在努力减少尺寸和往返时间......

我尝试编写此代码，但我不知道如何让用户点击“等待”功能。

我想以这种方式使用我的功能：

false

通过这种方式，我可以在几个上下文中使用相同的函数，只需更改作为参数传递的问题。这与confirm()

的行为相同

Answer 1

不是等待用户的输入然后从函数返回，而是在JavaScript中更常见的是提供一个回调函数，该函数将在您等待的操作完成时被调用。例如：

myCustomConfirm("Are you sure?", function (confirmed) {
    if (confirmed) {
        // Whatever you need to do if they clicked confirm
    } else {
        // Whatever you need to do if they clicked cancel
    }
});

这可以按照以下方式实施：

function myCustomConfirm(message, callback) {
    var confirmButton, cancelButton;

    // Create user interface, display message, etc.

    confirmButton.onclick = function() { callback(true); };
    cancelButton.onclick = function() { callback(false); };
}

Answer 2

如果使用jQuery，为什么不实现jQueryUI？并使用Dialog函数，如下所示：

作为2部分：

<强> HTML

<div id="dialog-confirm" title="ALERT">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure?</p>
</div>

<强>脚本

$( "#dialog-confirm" ).dialog({
    resizable: false,
    modal: true,
    buttons: {
        "OK": function() {
            $( this ).dialog( "close" );
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});

所有脚本：

$(function() {
    $("<div />").attr("id", "dialog-confirm").append(
        $("<p />").text('Are you sure?').css("text-align", "center").prepend(
            $("<span />").addClass("ui-icon ui-icon-alert").css({
                float: 'left',
                margin: '0 7px 20px 0'
            })
        )
    ).dialog({
        resizable: false,
        modal: true,
        title: "ALERT",
        buttons: {
            "OK": function() {
                answer=1;
                $(this).dialog("close");
            },
            "Cancel": function() {
                answer=0;
                $(this).dialog("close");
            }
        }
    });
});

jsFiddle

Answer 3

这应该通过回调来完成。您最接近的是使用发布和订阅模型以及一些自定义事件。

这样做：

当用户单击“是”按钮时，触发名为clickedYes的自定义事件。为“不”做同样的事情

$('#yesbtn').click(function(){
    $(document).trigger('clickedYes');
});

$('#nobtn').click(function(){
    $(document).trigger('clickedNo');
});

现在我们需要“监听”或订阅这些事件并在上下文中执行适当的操作。

让我们创建一个假设的情况：您的用户点击了删除，并且您想确认该选择。

首先设置你想要发生的事情，如果他们点击是：

$(document).unbind('clickedYes'); //Unbind any old actions
$(document).bind('clickedYes',function(){
    //Code to delete the item
    //Hide the popup
});

然后，如果他们点击否，你想要发生什么：

$(document).unbind('clickedNo'); //Unbind any old actions
$(document).bind('clickedNo',function(){
    //Hide the popup and don't delete
});

因此我们设置了正在侦听clickedYes或clickedNo的操作。现在我们只需要向用户显示弹出窗口，以便他们必须单击是或否。当他们这样做时，他们将触发上述事件。

所以你的myConfirm（）函数将执行以下操作：

function myConfirm(msg){
    //change the message to 'msg'
    //Show the popup
}

顺序如下：

将自定义事件的触发器绑定到是和否按钮
在提示之前 - 取消绑定任何旧操作并附加新操作
向用户显示一个弹出窗口，使其触发您的操作。

这将允许你调用这样的函数myConfirm（'你确定'）;这不是你想要的......但我认为不可能做到你想要的。

使用JavaScript自定义确认对话框

3 个答案:

jsFiddle