如何将JavaScript确认为HTML5按钮操作？

Question

我有以下代码：

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>

我已经将单击事件应用于两个按钮，但是我无法让它们上班。有什么想法吗？

Answer 1

您需要了解如何为异步而写作，因为没有其他方法可以实现您想做的事情。内置的确认（提示>提示> ，arter> arter et）有效地暂停JS

执行 - up，您没有那么奢侈。您需要使用回调来实现一个工作解决方案，

我建议使用诺言 - 无论如何，这只是荣耀的回调，还可以将能够与async /等待 - 这具有使代码 LOW 更像您使用的代码的优点，如果您没有做太多的异步编码

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>

Answer 2

尝试使用bootstrap模态

使用Twitter Bootstrap Modal而不是确认Dialog

或jQuery ui

对话？