你怎么能让一个电灯盒消耗整个页面，并使用户感觉无缝呢？

Question

我们希望在页面加载时创建一个完整的页面光照框。目前，我们只能在它显示光盒后面的一些元素(例如客户端徽标、导航等)之后才能实现这一点。

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

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

Answer 1

这是我以前在其他库中遇到的一个问题。我把范围缩小到了我正在检查的那个事件，我想要启动这个lightbox脚本。有些lightbox脚本将等待加载window对象，然后才允许您启动lightbox，而其他脚本则不会。你需要后者。而且，您连接到的事件不应该是window加载，而应该是准备就绪的DOM。在jQuery中，应该是：

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

在香草JS中，应该是：

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

这将等待所有DOM元素加载，但会在任何元素呈现之前触发。这应该是一个好点，因为所有需要的元素都在DOM中，而不是在页面上。这应该会在呈现页面时将您的lightbox放到DOM中，这样您就不会得到FOUC。

另一个选项

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