在JavaScript中自定义“确认”对话框？
在JavaScript中自定义“确认”对话框？
提问于 2011-08-03 23:54:21
我一直在做一个使用自定义“模式对话框”的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);
}
这是实现我想要的东西的好方法，还是有更好的方法？
回答 7
Stack Overflow用户
回答已采纳
发布于 2011-08-04 00:01:29
您可能需要考虑将其抽象为如下所示的函数：
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
}
);Stack Overflow用户
发布于 2016-08-29 02:27:38
您应该考虑将SweetAlert作为一个选项来节省一些工作。它在默认状态下非常漂亮，并且可以高度定制。
确认示例
sweetAlert(
{
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!"
},
deleteIt()
);
Stack Overflow用户
发布于 2019-11-16 22:51:06
为了使您能够像正常的确认对话框一样使用确认框，我将使用Promise，它将使您能够等待结果，然后对此采取行动，而不是必须使用回调。
这将允许您在代码的其他部分遵循相同的模式，例如...
const confirm = await ui.confirm('Are you sure you want to do this?');
if(confirm){
alert('yes clicked');
} else{
alert('no clicked');
}例如，请参阅codepen，或者运行下面的代码片段。
https://codepen.io/larnott/pen/rNNQoNp
const ui = {
confirm: async (message) => createConfirm(message)
}
const createConfirm = (message) => {
return new Promise((complete, failed)=>{
$('#confirmMessage').text(message)
$('#confirmYes').off('click');
$('#confirmNo').off('click');
$('#confirmYes').on('click', ()=> { $('.confirm').hide(); complete(true); });
$('#confirmNo').on('click', ()=> { $('.confirm').hide(); complete(false); });
$('.confirm').show();
});
}
const saveForm = async () => {
const confirm = await ui.confirm('Are you sure you want to do this?');
if(confirm){
alert('yes clicked');
} else{
alert('no clicked');
}
}body {
margin: 0px;
font-family: "Arial";
}
.example {
padding: 20px;
}
input[type=button] {
padding: 5px 10px;
margin: 10px 5px;
border-radius: 5px;
cursor: pointer;
background: #ddd;
border: 1px solid #ccc;
}
input[type=button]:hover {
background: #ccc;
}
.confirm {
display: none;
}
.confirm > div:first-of-type {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
top: 0px;
left: 0px;
}
.confirm > div:last-of-type {
padding: 10px 20px;
background: white;
position: absolute;
width: auto;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
border: 1px solid #333;
}
.confirm > div:last-of-type div:first-of-type {
min-width: 150px;
padding: 10px;
}
.confirm > div:last-of-type div:last-of-type {
text-align: right;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example">
<input type="button" onclick="saveForm()" value="Save" />
</div>
<!-- Hidden confirm markup somewhere at the bottom of page -->
<div class="confirm">
<div></div>
<div>
<div id="confirmMessage"></div>
<div>
<input id="confirmYes" type="button" value="Yes" />
<input id="confirmNo" type="button" value="No" />
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6929416
复制相关文章
相似问题