自定义“确认"JavaScript 中的对话框? [英] Custom "confirm" dialog in JavaScript?

问题描述

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

在网站的许多部分，我的代码如下所示:

var warning = '你确定要这样做吗?';如果(确认(警告)){//做一点事}别的 {//做其他事情}

这没问题，但让确认对话框与页面其余部分的样式相匹配会很好.

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

<input type='button' value='yes' id='btnYes'/><input type='button' value='no' id='btnNo'/>
<脚本>函数 DoSomethingDangerous() {var warning = '你确定要这样做吗?';$('.title').html(警告);var dialog = $('#modal_dialog').dialog();功能是(){dialog.dialog('关闭');//做一点事}函数号(){dialog.dialog('关闭');//做其他事情}$('#btnYes').click(Yes);$('#btnNo').click(No);}

这是实现我想要的好方法，还是有更好的方法?

解决方案

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

function dialog(message, yesCallback, noCallback) {$('.title').html(message);var dialog = $('#modal_dialog').dialog();$('#btnYes').click(function() {dialog.dialog('关闭');yesCallback();});$('#btnNo').click(function() {dialog.dialog('关闭');没有回调()；});}

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

dialog('你确定要这样做吗?',功能() {//做一点事},功能() {//做其他事情});

I've been working on an ASP.net project that uses custom 'modal dialogs'. I use scare quotes here because I understand that the 'modal dialog' is simply a div in my html document that is set to appear "on top" of the rest of the document and is not a modal dialog in the true sense of the word.

In many parts of the web site, I have code that looks like this:

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

This is okay, but it would be nice to make the confirm dialog match the style of the rest of the page.

However, since it is not a true modal dialog, I think that I need to write something like this: (I use jQuery-UI in this example)

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

Is this a good way to accomplish what I want, or is there a better way?

解决方案

You might want to consider abstracting it out into a function like this:

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

You can then use it like this:

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

这篇关于自定义“确认"JavaScript 中的对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！