如何实现点击按钮复制内容后，通过弹窗确认或延迟跳转页面？

没问题，这两个需求都可以实现，我来一步步帮你解决：

首先回答你的第一个问题：完全可以通过提示框实现跳转。因为浏览器的alert()是阻塞式弹窗——只有用户点击「确定」后，后面的代码才会继续执行，所以我们可以在弹窗之后直接写跳转逻辑。不过要注意你现有代码里的小问题：$temp.remove()之后再调用$temp.val()是拿不到值的，得先把要复制的文本存到变量里。

接下来分两种场景给你修改后的代码：

场景1：用户点击提示框「确定」后跳转 #

我们只需要在alert()之后添加跳转代码就行，修改后的完整代码如下：

<div class="country-container">
  <button class="promocode" onclick="copyToClipboard('#p1')">
    <p style="text-decoration: none;">Use promocode:<br><span id="p1">SPAIN-2018</span></p>
  </button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function copyToClipboard(element) {
  var text = $(element).text(); // 先把文本存起来，避免移除temp后拿不到
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(text).select();
  document.execCommand("copy");
  $temp.remove();
  
  alert("You’ve copied the promo code " + text);
  // 用户点击确定后执行跳转
  window.location.href = "https://your-target-url.com"; // 替换成你的目标页面URL
}
</script>

⚠️ 注意：如果页面还没引入jQuery，一定要加上<script>标签引入，不然$会报错。

场景2：自动延迟若干秒后跳转，同时支持点击确定提前跳转 #

这种情况我们可以用setTimeout()实现延迟跳转，同时修改提示内容告诉用户跳转倒计时，代码如下：

<div class="country-container">
  <button class="promocode" onclick="copyToClipboard('#p1')">
    <p style="text-decoration: none;">Use promocode:<br><span id="p1">SPAIN-2018</span></p>
  </button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function copyToClipboard(element) {
  var text = $(element).text();
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(text).select();
  document.execCommand("copy");
  $temp.remove();
  
  var redirectUrl = "https://your-target-url.com"; // 替换成你的目标URL
  var delaySeconds = 5; // 设置延迟跳转的秒数
  
  // 提示用户复制成功，以及倒计时信息
  alert(`You’ve copied the promo code ${text}. You will be redirected in ${delaySeconds} seconds, or click OK to redirect immediately.`);
  
  // 启动延迟跳转定时器
  var redirectTimer = setTimeout(function() {
    window.location.href = redirectUrl;
  }, delaySeconds * 1000);
  
  // 因为alert是阻塞的，用户点击确定后会执行这里的代码：清除定时器并提前跳转
  clearTimeout(redirectTimer);
  window.location.href = redirectUrl;
}
</script>

这个逻辑能完美覆盖两种需求：用户点击「确定」会立刻跳转；如果用户没操作，到时间后自动跳转。

额外优化建议 #

document.execCommand("copy")虽然能用，但现在更推荐使用现代的navigator.clipboard.writeText()API，兼容性更好且代码更简洁，替换后的复制逻辑如下：

// 替换原来的复制代码块
navigator.clipboard.writeText(text).then(function() {
  // 复制成功后的提示和跳转逻辑
  alert("You’ve copied the promo code " + text);
  window.location.href = redirectUrl;
}).catch(function(err) {
  console.error('Failed to copy: ', err);
  // 复制失败可以加个fallback，比如提示用户手动复制
  alert("Copy failed, please copy the code manually.");
});

内容的提问来源于stack exchange，提问作者M.Vik