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

Question

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

Answer 1

你可能想看看我写的一个旧的 JS 库，叫做 子模态.

易于理解和修改。进城去；）

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

Answer 2

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

它不会为您禁用滚动（您仍然可以看到正常的页面背景通过黑色覆盖层滚动），但“弹出窗口”在任何情况下都将固定在屏幕上。

Answer 3

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

jQuery.boxy 是另一个很好的、轻量级的模式对话框插件。

Answer 4

我通常使用 厚盒 为了这。它工作得非常好，如果用户没有打开 JS，它也会很好地降级。

它确实使用了 jQuery，但你可以从 Google 加载它： http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js 也许还能从缓存中受益。

Answer 5

获取 JavaScript 分机 图书馆。它具有模态覆盖的功能。

Answer 6

ThickBox（不再开发）引导我找到了这个库，它似乎工作得很好：

http://fancybox.net