javascript - 如何从确认弹出警报中获取返回值

Question

我正在尝试弹出警报。它的问题是我无法获得返回值。这是因为关闭函数是在函数本身中创建的。

有没有办法返回值？

JSFiddle

HTML

<button id="div" onclick="popup()">START</button>

<div id="popUp">
  <div id="popUpHeader">
  </div>
  <div id="popUpBody">
    <h1 id="title"></h1>
    <p id="txt"></p>
  </div>
  <button id="popUpButton">OK</button>
  <button id="popUpYes">YES</button>
  <button id="popUpNo">NO</button>
</div>

JS

function popup() {
  var a = popupbox('Warning', 'Are you sure?', 'yesno');
  alert(a);
}

function popupbox(title, txt, type) {
  document.getElementById('popUp').style.display = 'block';
  document.getElementById('title').innerHTML = title;
  document.getElementById('txt').innerHTML = txt;

  if(type == 'ok') {
    document.getElementById('popUpButton').style.display = 'block';
    document.getElementById('popUpButton').onclick = function () {
      document.getElementById('popUp').style.display = 'none';
      document.getElementById('overlay').style.display = 'none';
    }
  } else {
    document.getElementById('popUpYes').style.display = 'block';
    document.getElementById('popUpNo').style.display = 'block';
    //return true;
    document.getElementById('popUpYes').onclick = function () {
      document.getElementById('popUp').style.display = 'none';
      return true;
    }
    document.getElementById('popUpNo').onclick = function () {
      document.getElementById('popUp').style.display = 'none';
      return false;
    }
  }
}

CSS

#popUp {
    display: none;
    position: absolute;
    top: 25%;
    left: 50%;
    margin-left: -100px;
    background: white;
    width: 250px;
    min-height: 100px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #888;
    border-top: 5px solid black;
    box-shadow: 0px 2px 10px #999;
    z-index: 9999;
    text-align: center;
}
#popUpBody {
    margin: 3px 0px 3px 0px;
}
#popUpBody h1 {
    margin-top: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
}
#popUpBody p {
    padding: 10px 10px 0px 10px;
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    margin: 0 auto;
    /*ADJUST HEIGHT ACCORDING CONTENTS*/

    margin-bottom: 50px;
}
#popUpButton {
    display: none;
    position: absolute;
    bottom: 0px;
    width: 60px;
    margin: 10px 0px 10px 60px;
    padding: 5px;
    font-size: 14px;
}
#popUpYes {
    display: none;
    position: absolute;
    bottom: 0px;
    width: 60px;
    margin: 10px 0px 10px 40px;
    padding: 5px;
    font-size: 14px;
}
#popUpNo {
    display: none;
    position: absolute;
    bottom: 0px;
    width: 60px;
    margin: 10px 0px 10px 110px;
    padding: 5px;
    font-size: 14px;
}

Answer 1

问题是，您的 popupbox 函数立即返回。在您的弹出框函数中，您设置了具有返回值的 onclick 事件。这不会影响 popupbox 函数的返回值(因为 onclick 函数是在用户单击时异步执行的；)。

如果您希望能够处理用户输入，您应该创建执行 onclick 事件的回调函数，正如用户 gurvinder372 在他的回答中解释的那样。