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

Question

我创建了一个用于以下目的的链接：（1）通过打开新标签将用户定向到外部链接（2）确认他们在该外部链接中执行了特定操作，如果他们确认，则通知管理员此

我希望发生以下序列：

1. 用户点击链接并定向到链接之外（即www.google.com），同时在原始页面中弹出确认消息
2. 用户执行操作（或不执行）
3. 用户返回原始页面并看到确认弹出窗口＆＃34;请确认您已执行操作＆＃34;
4. 如果用户点击了“确定”，那么＆＃39; / dashboard / notify / admin /＆＃39;调用并通知管理员该操作已执行（这很好）。

目前，我只能在用户被定向到外部链接之前显示确认弹出窗口。有没有办法立即将用户引导到外部链接并让确认弹出窗口等待原始页面，以便他们确认何时返回？

＆＃13;
＆＃13;
$(document).ready(function(){

	$('.goal-completed').click(function(){

		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!');
				}
			});
		}
	})
});
＆＃13;
<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="http://www.google.com" target="_blank" class="goal-completed" task-id="6" task-name="Test">Link & Email</a>
                </div>
            </div>
        </div>
    </section>
＆＃13;
＆＃13;
＆＃13;

Answer 1

您可以执行以下操作：

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

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

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>

Answer 2

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

＆＃13;

＆＃13;

$(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');
  });
});

＆＃13;

#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;

＆＃13;

<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 %}

＆＃13;

＆＃13;

＆＃13;