按钮链接加载后JS确认弹出

您可以执行以下操作：

1. 用户点击按钮
2. 打开的新窗口带有其他URL
3. 弹出窗口打开，用户可以确认。这个弹出窗口的外观在不同的浏览器中会有所不同。例如，在Safari中，在用户返回原始窗口/选项卡之前，弹出窗口不会出现，但在Chrome中，它会立即出现

您可以在此处测试此片段：http://jworldhosting.com/Uploads/StackOverflow/windowOpenAlert.html因为StackOverflow片段似乎阻止了警报和url更改的演示

function loadAlert() {
  window.open("http://www.google.com", '_blank');
  var ss = confirm('Please confirm that you performed the action');
  if (ss) {
    var id, data, url = '/dashboard/notify/admin/'
    id = $(this).attr('task-id');
    data = {
      id: id
    };
    $.post(url, data, function(r) {
      if (r.response == 'OK') {
        alert('We will confirm and give you the points that you earned!');
      }
    });
  }
}

<section class="dashboard-section">
  <div class="container-fluid">
    <div class="row">
      <h1 class="blue register-title">Link and email test</h1>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <a href="javascript:loadAlert();" class="goal-completed" id="goal-completed" task-id="6" task-name="Test">Link & Email</a>
      </div>
    </div>
  </div>
</section>

我想提供最终解决方案的更新。我最终使用HTML创建了一个隐藏模式的弹出窗口，并在单击链接按钮时删除了隐藏的类。现在一切都按需要进行。

$(document).ready(function() {
  $('.goal-completed').click(function() {
    var id, data, url = '/dashboard/notify/admin/'
    id = $(this).attr('task-id');
    data = {
      id: id
    };
    $.post(url, data, function(r) {
      if (r.response == 'OK') {
        alert('We will confirm and give you the points that you earned!');
      }
    });
  })
  $('.goal-pop').click(function(event) {
    $("#modal").removeClass('hidden');
    $("#goal-confirm").removeClass('hidden');
    $("#close").removeClass('hidden');
    $("#overlay").removeClass('hidden');
  });
});

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
}
#modal {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 14px;
  padding: 8px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}
#goal-confirm {
  border-radius: 8px;
  background: #fff;
  padding: 20px;
}
#close {
  position: absolute;
  width: 24px;
  height: 27px;
  display: block;
  top: 9px;
  right: -1px;
}
.hidden {
  display: none;
}
.btn-yesno {
  position: relative;
  float: left;
  width: 45%;
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 12px;
  margin-left: 2%;
  margin-right: 2%;
  text-align: center;
  font-size: 16px;
  border: 1px solid;
  border-color: rgba(136, 136, 136, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-goals {
  position: relative;
  float: left;
  width: 85%;
  padding: 10px;
  margin-bottom: 12px;
  margin-right: 1%;
  text-align: center;
  font-size: 16px;
  border: 1px solid;
  border-color: rgba(136, 136, 136, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-action {
  color: #fff;
  background-color: #F5A623;

<section class="dashboard-section">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6">
        <a href="www.google.com" target="_blank" class="btn btn-block btn-goals goal-pop">Complete Task</a>
      </div>
    </div>
  </div>
  <div id='overlay' class='hidden'></div>
  <div id='modal' class='hidden'>
    <div id='goal-confirm' class='hidden'>
      Did you complete the task?</strong>
      <div class="row">
        <div class="col-lg-12">
          <a href="/dashboard" class="goal-completed btn btn-block btn-yesno btn-yes">Yes</a>
          <a href="/dashboard" class="btn btn-block btn-yesno btn-no">No</a>
        </div>
      </div>
    </div>
    <a href='#' id='close' class='hidden'>X</a>
  </div>
</section>
{% endblock %} {% block javascript %}
<script src="{{ STATIC_URL }}js/jquery.csrf.js"></script>
<script src="{{ STATIC_URL }}js/goal.js"></script>
{% endblock %}