如何在没有庞大 JavaScript 库的情况下创建 Netflix 风格的 iframe 覆盖？答案

【问题标题】：How can I create a Netflix-style iframe overlay without a huge javascript library?如何在没有庞大 JavaScript 库的情况下创建 Netflix 风格的 iframe 覆盖？
【发布时间】：2008-09-19 04:27:12
【问题描述】：

我正在尝试使用链接而不是在单独的弹出窗口中打开叠加层。这个覆盖应该包含一个半透明的 div 层，它可以阻止整个屏幕被点击。我还打算在这一点上禁用滚动。无论您在主页上的哪个位置，单击链接时，叠加层都应位于屏幕 X 和 Y 原点的中心。在这个覆盖 div 内部，应该是一个 iframe 配置，以便可以加载 3 种大小的内容。

【问题讨论】：

标签： javascript css overlay

【解决方案1】：

Shadowbox 是一个很好的内联“弹出窗口”脚本。如果您使用任何（jQuery、Prototype 等）或单独使用，它可以与任何常用的 JS 库一起使用，它具有非常全面的皮肤系统，因此您可以调整外观而无需进入源代码本身。
它也是我尝试过的唯一一个可以在所有常用浏览器中可靠运行的脚本（有几十个）。

它不会为您禁用滚动（您仍然可以通过深色叠加层看到正常的页面背景滚动），但“弹出窗口”无论如何都会固定在屏幕上。

【讨论】：

【解决方案2】：

http://onehackoranother.com/projects/jquery/boxy/

jQuery.boxy 是另一个不错的轻量级模态对话框插件。

【讨论】：

【解决方案3】：

您可能想查看我编写的旧 JS 库，名为 SubModal。

易于理解和修改。去镇上；）

修改后，将Minify 与服务器上的 gzip 结合使用。库的大小会很小。

【讨论】：

^^ 看不到您要显示的内容。如果您遇到问题，请联系 Google 支持小组。

【解决方案4】：

我通常为此使用ThickBox。如果用户没有打开 JS，它的效果非常好并且会很好地降级。

它确实使用了 jQuery，但您可以从 Google 加载它：http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js 并且可能会受益于缓存。

【讨论】：

【解决方案5】：

获取 javascript ext 库。它具有模态叠加的功能。

【讨论】：

【解决方案6】：

ThickBox（不再开发）将我带到了这个似乎运行良好的库：

http://fancybox.net

【讨论】：