Question

我正在尝试做一些非常简单的事情：点击链接，弹出模式以继续或取消链接的URL，继续到URL或取消（基本上隐藏模态）。我的问题是当模式弹出时，提示用户继续或取消时的“等待”时间。现在，我的代码似乎永远不会超过第一个waitForModalEvent()调用：

<a href="someURL" onclick='return handleClick()'> Click Here </a>


  function handleClick() {
    if (dataChanged()) {
        returnValue = false;
        displayModal();
        returnValue = waitForModalEvent();
        //never called at or past this point. Tested with alert()
        return returnValue;
    } else {
        return true;
    }
  }

  var continueClicked = false;
  var cancelClicked = false;
  function waitForModalEvent() {
    while(!continueClicked && !cancelClicked) {
        waitForModalEvent(); //I know this gives the browser some troubles
    }

    if (continueClicked) {
        return true;
    } else {
        return false;
    }
  }

我知道这段代码有问题（特别是永远不会结束的可怕的waitForModalEvent()递归调用）。但是，我坚持如何解决此问题，并且在用户点击“继续”或取消后，在handleClick()中返回true或false。我的设置是否使用<a href>那个onclick天生就是我想要完成的一个糟糕的设置？

我已经阅读了回调，但无法掌握如何使用回调来处理我的情况（如果有的话）。希望得到任何建议或见解！

Answer 1

你已经生成了一个无限循环来锁定JavaScript事件循环。在while循环完成之前，您正在测试的变量永远不会改变。

如果你想基于基于DOM的对话做一些事情，你必须使用回调来做。在等待用户交互时，无法阻止（在主机环境之外提供类似confirm的功能）。

此处使用回调的一般方法是始终取消单击链接的默认操作，然后让回调复制其功能（或者只是在对话框中放置常规链接）。

Answer 2

使用jQuery UI检查此codepen以获取回调和模态对话的说明：

http://codepen.io/anon/pen/KdaRmP

$('button.showModal').click(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      modal: true,
      buttons: {
        "Proceed to The Dividing Line": function() {
          $( this ).dialog( "close" );
          location.href='http://www.thedividingline.com/';
        },
        Cancel: function() {
          $('DIV.output').text('Canceled.');
          $( this ).dialog( "close" );
        }
      }
    });
});

我在这里使用了jQuery UI文档中的一个示例：https://jqueryui.com/dialog/#modal-confirmation（我需要更改一些内容）。

修改

现在回调会调用超链接。

单击“链接”后选择继续或不继续

2 个答案:

修改