javascript - 浏览器窗口顶部和底部的动态叠加层

Question

我试图弄清楚如何使用 JavaScript 和 jQuery 动态创建两个<div>元素，并在浏览器窗口顶部覆盖一个，在底部覆盖另一个，两者的宽度都等于浏览器窗口的宽度。

我不太确定如何解决这个问题，所以我想我只想问两个主要问题：

1. 有没有办法获取浏览器窗口的尺寸并使用它来定位叠加层？

2. 创建静态定位元素时，如何将它们插入 DOM 以使其不会改变页面的任何其他部分？

感谢您的任何提示。

Answer 1

1. jQuery 宽度/ jQuery 高度

   var $win = $(window), $width = $win.width(), $height = $win.height();

2. jQuery 追加（）

   $(body).append(div); <- div 被创建为变量中的字符串

第二个假设它们是位置：绝对。无论您想在何处附加该项目，只需选择您想要的父项并根据需要应用即可。