自定义“确认"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屋!