打开新 window 时创建覆盖

Question

我正在尝试编写代码或查找 code/plugin，以允许以下场景工作...

If there is one link on my page that goes to an external link and it opens a new window for that link, if the user comes back to my site there is an overlay would then be there. This action doesn't even have to happen on a returnto action, but could be one action that when clicked, an overlay is placed while a new window is opened.

需要发生三件事：

只有 1 个 link 将具有独特的 action/id/class（不能是每个 link）
当访问者点击这个特定的 link 时，target="_blank" 或 target="_new" 会为用户创建新的去处，但是
原始 window 不会丢失，因此如果用户在执行步骤 #2 操作后确实返回 window，现在会有一个叠加层和消息告诉他们一些事情（即注册时事通讯、感谢访问等）。

我不介意它是 CSS、Javascript 还是 AJAX 修复 - 我只是无法实现发生了。

Answer 1

很简单。确保所有外部链接都包含 target="blank" 或 class="external"。并在您的代码中添加此 HTML：

<div class="mask">
  <div class="message"></div>
</div>

.mask {position: fixed; height: 100%; width: 100%; left: 0; top: 0; display: none;}
.mask .message {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

现在，JavaScript 部分：

$(function () {
  // Change ".external" to '[target="_blank"]' for the other way.
  $(".external").click(function () {
    $(".mask").show();
  });
  $(".mask").click(function () {
    $(this).fadeOut();
  });
});

打开新 window 时创建覆盖

Creating overlay when a new window has been opened

javascript

css

jquery

overlay

popup