我有以下代码:
if(changedStatus()){
var mAns = confirm("You have changed your status. This will alter your estate plan and may cause you to lose some data. Are you sure that you want to do this?");
if(!mAns) return false;
}
这与默认的JS确认弹出窗口一起工作得很好，但我想用HTML5按钮来实现相同的动作:
<div id="cres_statusmssg">
<p>Changing your status will alter your estate plan and may cause you to lose some data. Do you want to proceed?</p>
<button id="cres_yes">Yes</button>
<button id="cres_cancel">Cancel</button>
我已经应用点击事件两个按钮，但我不能让他们工作。什么好主意吗?
您需要了解如何编写异步，因为没有其他方法可以实现您想要做的事情。内置的confirm(以及prompt,alert等)有效地暂停JS执行，直到用户与弹出的
进行交互。写更好的弹出窗口，你没有那么奢侈。您需要使用回调来实现工作解决方案
我建议使用Promises——不管怎样，它只是被美化了的回调，有一个额外的好处，就是可以与async/await一起使用——如果你没有做过太多的异步编码，它的好处是使代码看起来更像你习惯的代码
function statusmssgDialog() {
const dlg = document.getElementById('cres_statusmssg');
dlg.showModal();
return new Promise((resolve, reject) => {
const clk = function(e) {
resolve(this.dataset.value === 'true');
dlg.close();
};
dlg.querySelectorAll('button').forEach(btn =>
btn.addEventListener('click', clk, { once: true})
);
});
}
// usage - it's easier if the function where you
// call statusmssgDialog is `async`
// but you can also use Promise.then/.catch of course
//
async function fn() {
if( true /*changedStatus()*/){
const mAns = await statusmssgDialog();
console.log(`user action is ${mAns}`);
if(!mAns) return mAns;
}
console.log('doing more things here when yes is clicked or chengedStatus is false?');
}
// asynchrony is like a virus,
// anything that calls an asynchronous function and needs the result
// needs to be written to account for asynchrony
// here, I use .then/.catch instead of async/await
// because await isn't an option at the top-level of code
// unless it's the top-level of a module script in modern browsers
fn().then(r => {
if (r === false) {
console.log('cancel was clicked');
return;
}
console.log('yes was clicked');
});.modal-dialog {
border-radius: 9px;
box-shadow: 0 0 1em rgb(127 127 127 / 0.8);
width: 30rem;
max-width: 90%;
}
.modal-dialog::backdrop {
background: rgb(0 0 0 / 0.4);
backdrop-filter: blur(1px);
}
body {
background-color: hsl(240 100% 95%);
}<dialog id="cres_statusmssg" class="modal-dialog">
<div>
<p>Changing your status will alter your estate plan and may cause you to lose some data. Do you want to proceed?</p>
<button id="cres_yes" data-value="true">Yes</button>
<button id="cres_cancel" data-value="false">Cancel</button>
</div>
</dialog>
<div>
<p>Dummy page text</p>
<div>在上面，对话框承诺总是解决，但有一个替代方案，拒绝如果取消按下
function statusmssgDialog() {
const dlg = document.getElementById('cres_statusmssg');
dlg.showModal();
return new Promise((resolve, reject) => {
const clk = function(e) {
dlg.close();
if (this.dataset.value !== 'true') {
return reject('cancel pressed');
}
resolve('yes pressed');
};
dlg.querySelectorAll('button').forEach(btn =>
btn.addEventListener('click', clk, { once: true})
);
});
}
async function fn() {
if( true /*changedStatus()*/) {
try {
const mAns = await statusmssgDialog();
console.log(`yes pressed`);
} catch(e) {
console.log('cancel was pressed');
throw e; // pass the cancel "error" to the caller
}
}
console.log('doing more things here when yes is clicked or chengedStatus is false?');
}
fn().then(r => {
console.log('yes was clicked');
}).catch(e => {
console.log(`user action was ${e}`);
});.modal-dialog {
border-radius: 9px;
box-shadow: 0 0 1em rgb(127 127 127 / 0.8);
width: 30rem;
max-width: 90%;
}
.modal-dialog::backdrop {
background: rgb(0 0 0 / 0.4);
backdrop-filter: blur(1px);
}
body {
background-color: hsl(240 100% 95%);
}<dialog id="cres_statusmssg" class="modal-dialog">
<div>
<p>Changing your status will alter your estate plan and may cause you to lose some data. Do you want to proceed?</p>
<button id="cres_yes" data-value="true">Yes</button>
<button id="cres_cancel" data-value="false">Cancel</button>
</div>
</dialog>
<div>
<p>Dummy page text</p>
<div>尝试使用Bootstrap Modal
使用Twitter引导模式代替确认对话框
或者jquery ui如何实现"确认";对话框中的Jquery UI对话框?