javascript - JavaScript 中的自定义 "confirm"对话框？

Question

我一直致力于使用自定义“模态对话框”的 ASP.net 项目。我在这里使用恐吓引号是因为我知道“模态对话框”只是我的 html 文档中的一个 div，它被设置为出现在文档其余部分的“顶部”，而不是真正意义上的模态对话框.

在网站的许多地方，我都有这样的代码:

var warning = 'Are you sure you want to do this?';
if (confirm(warning)) {
    // Do something
}
else {
    // Do something else
}

这没关系，但最好让确认对话框与页面其余部分的样式相匹配。

但是，由于它不是真正的模态对话框，我认为我需要这样写:(我在这个例子中使用 jQuery-UI)

<div id='modal_dialog'>
    <div class='title'>
    </div>
    <input type='button' value='yes' id='btnYes' />
    <input type='button' value='no' id='btnNo' />
</div>

<script>
function DoSomethingDangerous() {
    var warning = 'Are you sure you want to do this?';
    $('.title').html(warning);
    var dialog = $('#modal_dialog').dialog();
    function Yes() {
        dialog.dialog('close');
        // Do something
    }   
    function No() {
        dialog.dialog('close');
        // Do something else
    }    
    $('#btnYes').click(Yes);
    $('#btnNo').click(No);
}

这是完成我想要的事情的好方法，还是有更好的方法？

Answer 1

您可能需要考虑将其抽象成这样的函数:

function dialog(message, yesCallback, noCallback) {
    $('.title').html(message);
    var dialog = $('#modal_dialog').dialog();

    $('#btnYes').click(function() {
        dialog.dialog('close');
        yesCallback();
    });
    $('#btnNo').click(function() {
        dialog.dialog('close');
        noCallback();
    });
}

然后你可以像这样使用它:

dialog('Are you sure you want to do this?',
    function() {
        // Do something
    },
    function() {
        // Do something else
    }
);