定制确认的JavaScript对话框(Custom confirm dialog with Java

我想创建一个类似于JavaScript函数confirm()显示一个对话框（问题并提供2个按钮一个div），返回true ，如果用户点击“确定”或false ，否则。

是否有可能做到这一点使用JavaScript / jQuery的，但没有插件（如jQuery用户界面或Dialog）？因为我想，以减少大小和往返时间...

我试着写这段代码，但我不知道如何使功能“等待”的用户点击。

我想用我的功能是这样的：

answer=myConfirm("Are you sure?")

通过这种方式，我可以使用相同的函数在若干情况下，简单地改变作为参数传递的问题。这是相同的行为确认（）

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的？并使用对话功能如下：

作为第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:

这真应了回调来完成。最接近的事到你以后是使用发布和订阅模型，一些自定义的事件。

要做到这一点：

当用户点击Yes按钮，触发一个自定义事件称为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安装操作。现在我们只需要向用户展示弹出，使他们必须点击yes或no。当他们这样做，他们会触发上述事件。

所以你myConfirm（）函数将只做到以下几点：

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

因此顺序将是：

绑定触发自定义事件的是和否按钮
促使以前 - 解除绑定任何旧的行动，附上您的新的
与将导致他们以触发操作的弹出式呈现给用户。

这将允许您调用的函数像这样myConfirm（“你确定”）; 这不是很你......之后是什么，但我不认为这是可以做到的正是你想要的。

文章来源: Custom confirm dialog with JavaScript