如何使横幅关闭功能在前面的回答中发挥作用

How do I get the banner close function to work in this previous answer?

本文关键字：作用 在前面 何使横 功能      更新时间：2023-09-26

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

将一个条幅div叠加在另一个div上，如果可能的话，使用jQuery

我已经尽我所能进行了编码，它在一定程度上起作用，但也有几个问题，完全是因为我对这些事情的了解很低！

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

2） 我的条幅只有250像素高，但下面的内容有好几段长——内容被条幅隐藏了（我选择了白色背景，因为条幅本身是白色的），但页脚就在页面的底部，在内容结束的地方，所以有一个很大的缺口，看起来有点垃圾。我可以让页面只显示实际高度的横幅吗？然后当它关闭时，页面会扩展到显示内容的样子？非技术术语我知道但不知道；我不知道该怎么解释。。。

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

非常感谢Claire

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

同样为了完整性：您也可以考虑在关闭body标记之前包含脚本，而不是在标题部分中包含脚本-可以在这里找到为什么在标题中包含css和在末尾包含js更好的详细解释：在HTML文件中放置Javascript的位置？

关于内联脚本与外部脚本文件问题的进一步参考：我什么时候应该使用内联与外部Javascript？

问题2:否。有一个javascript函数resizeTo()（如window.resizeTo(400,400)）可以调整浏览器窗口的大小，但出于充分的原因，许多浏览器默认禁用了该功能。参考，例如这里：javascript"；resizeTo"；功能在Chrome和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%），你可以在这里检查几种方法：如何使div的高度为页面（而不是屏幕）的100%？

问题3：在上面的Fiddle中使用了显示以div为中心的几个解决方案之一。您可以查看这里提供的各种解决方案：使用jQuery在屏幕上居中显示DIV

相关文章：