javascript - 如何让灯箱占据整个页面并让用户看起来无缝衔接？

Question

我们想创建一个在页面加载时显示的整页灯箱。目前我们只能在它显示灯箱后面的一些元素(例如客户 Logo 、导航等)后才能实现。

• 我希望它对用户来说是无缝的，看起来就像一个着陆点 页。只是寻找想法，因为我知道之前加载了头部内容 正文内容。
• javascript 是我们提供给客户的分析代码，它 必须进入页面正文，我们无权访问 他们网站的头部部分。
• 他们将来自广告 - 所以他们会期待
  内容，它看起来像一个网站。这只是一种更简单的方法 在客户网站上设置登陆页面，而无需他们 使用 FTP、创建空白页面、添加代码等。

所以我要么需要一种方法来在头部中的 javascript 之前加载正文中的 javascript，要么需要一种方法来在灯箱加载时屏蔽页面背景中的所有内容。

Answer 1

这是我以前在其他图书馆遇到过的问题。我将范围缩小到我正在检查以触发灯箱脚本的事件。一些灯箱脚本会等待 window 对象加载，然后才允许您启动灯箱，而其他灯箱脚本则不会。你需要后者。此外，您 Hook 的事件不应该是 window 加载，而是 DOM 准备就绪。在 jQuery 中它将是:

jQuery(documument).ready(function(){ 
    //some code 
});

在 vanilla JS 中它会是:

document.addEventListener("DOMContentLoaded", function() {
    // some code
});

这将等待所有 DOM 元素加载，但会在任何元素呈现之前触发。这应该是启动灯箱的好地方，因为所有需要的元素都在 DOM 中，而不是在页面上。当页面呈现时，这应该将您的灯箱放在 DOM 中，您不会得到 FOUC。 .

另一种选择

您可以采用的另一个不错的方法是将灯箱添加到 HTML 中的页面并设置 cookie 以隐藏灯箱。新用户将立即获得灯箱，回访用户不会被另一个弹出窗口打扰。您会在许多医疗保健和政府网站上看到这一点。