javascript - 打开新窗口时创建覆盖

标签 javascript jquery css popup overlay

我正在尝试编写代码或查找代码/插件,以允许以下场景工作...

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. 只有 1 个链接具有唯一的操作/ID/类(不能是每个链接)
  2. 当访问者点击此特定链接时,target="_blank"target="_new" 会为用户创建新的去处,但是 <
  3. 原始窗口不会丢失,因此如果用户在执行第 2 步操作后确实返回到该窗口,现在会有一个叠加层和消息告诉他们一些事情(即注册时事通讯,谢谢访问等)。

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

最佳答案

很简单。确保所有外部链接中都有 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();
  });
});

关于javascript - 打开新窗口时创建覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34167023/

相关文章:

javascript - Framer.js 工作室 PSD

javascript - 如何按键对对象数组进行排序?无法正确处理

html - 单选按钮的边框

javascript - 将唯一 ID 传递给 Javascript 以进行水平滚动

css - 标签链接 CSS 不工作?

javascript - lodash 中的独特联合

javascript - 如何改变谷歌地图的颜色

javascript - d3 js 圆形条形图,如何传递对象而不是 .csv 文件?

javascript - 如何使用 jquery 库限制鼠标移动到 div

javascript - 显示与所需引用相匹配的正确项目