如何让横幅关闭功能在上一个答案中起作用？

Question

David Thomas 之前回答了这个关于叠加横幅的问题，默认情况下，在访问者查看主页内容之前会查看这些横幅。

Superimpose a banner div over another div, with jQuery if possible

我已尽我所能编写代码，并且在一定程度上可以正常工作，但存在一些问题，完全是由于我确信我对此类问题的了解程度较低！

1) X 关闭不起作用，但它不会，因为我还没有将编码的 JSQuery 部分放在任何地方 - 它在哪里 - 是否有一个单独的 JS 文件（在这种情况下如何你在 html 中引用它吗？），或者它是否与 CSS 等一起放在标题中？抱歉这个愚蠢的问题

2) 我的横幅只有 250px 高，但下面的内容有几段长 - 内容已被横幅隐藏（白色背景，我选择了白色背景，因为横幅本身是白色的）但页脚是就在页面的底部，在内容结束的下方，所以有一个很大的差距，看起来有点垃圾。我可以让页面仅在其实际高度显示横幅，然后当它关闭时，页面会扩展到显示内容的样子？我知道但不知道如何解释的非技术术语...

3) 我的横幅没有覆盖内容的整个宽度，所以我可以将其居中，而不是将其放置在 0,0 处吗？

非常感谢 克莱尔

Answer 1

问题 1： 您可以将 jquery 代码复制到单独的文件中，例如称为main.js，并将其包含在您的html页面的头部中

<script src="main.js"></script>

以防文件在您的 html 页面旁边。更好的做法是为 css、脚本和图像使用单独的文件夹，例如如果您有一个名为 scripts 的目录，则包含将是

<script src="/scripts/main.js"></script>

对于相对路径（假设您的 html 页面位于根级别，脚本作为子目录），或者，以防万一您在没有本地服务器的情况下进行本地测试

<script src="scripts/main.js"></script>

请务必在之前包含您的 jquery 版本，其中包含使用 jquery 函数的 javascript 文件。
您还可以将脚本部分包含在 html 页面中（也在 jquery 的包含之后）作为内联脚本：<script> /* your code */ </script>。为了完整性 - 因为我不知道有问题的 html（如果它是 HTML5 或 HTML4） - 可能有必要将 type 属性添加到 script 标签：<script type="text/javascript"> 这适用于脚本标签，包括ths js 文件以及在线脚本的脚本标记。 type 属性在 HTML5 中是可选的，但在 HTML4 中是必需的。

也为了完整性：您还可以考虑在结束 body 标记之前包含脚本，而不是在头部部分 - 详细解释为什么最好在标题中包含 css 和末尾的 js 可以找到这里：Where to place Javascript in a HTML file?

有关内联脚本与外部脚本文件问题的进一步参考：When should I use Inline vs. External Javascript?

问题 2： 没有。有 javascript 函数 resizeTo() - 像 e.g. window.resizeTo(400,400) - 这使得调整浏览器窗口的大小成为可能，但出于充分的理由，许多浏览器默认禁用了它。参考例如这里：The javascript "resizeTo" function not working in Chrome and Opera 和这里：http://kb.mozillazine.org/Resizing_oversize_window#JavaScript_no_longer_allowed_to_resize_windows__through_the_Location_Bar。您可以使用例如一个面具代替 - 可能你已经在很多页面上看到过这个，例如当图像/幻灯片/视频等显示在模态窗口中并且模态窗口下方的页面被灰色透明 div 覆盖时。就像一个非常简化的Fiddle 的例子。当您单击横幅时，横幅和蒙版将被隐藏。 Fiddle 中的 jquery 代码在加载 Fiddle 时已经执行，可以使用包裹在 $( document ).ready(function() {} 中，以便在加载 jquery 时将掩码的高度设置为文档高度：

$(document).ready(function() {
  $("#banner").on("click", function() {
    $("#banner, #mask").hide();
  });
  $('#mask').height($(document).height());
});

作为参考，因为这只是将遮罩设置为覆盖屏幕的一种可能方法（在 Fiddle 中使用额外的 CSS，例如将遮罩的宽度设置为 100%），您可以在此处查看几种方法：How to make a div 100% of page (not screen) height?

问题 3： 在上面的 Fiddle 中使用了显示 div 居中的几种解决方案之一。您可以查看此处提供的各种解决方案：Using jQuery to center a DIV on the screen