1

我正在用 CSS 和 HTML 制作一个网站（ofc 有 JS、jQuery 和 XML，但让我们直言不讳）我想制作一个正在使用的按钮<ul>并使<li> 网页变暗，我找到了这个，代码：

#dimmer
{

background:#000;
    opacity:0.5;
    position:fixed; /*enter code here important to use fixed, not absolute */
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:9999; /* may not be necessary */
}

你们中的任何人都知道如何使 CSS 菜单按钮使用其div内部吗？

4

2 回答 2

1

这是 CodePen 上的演示，用于演示调光效果和按钮：http ://codepen.io/srig99/full/pDzgj 。正如 user1618143 建议的那样，jQuery 将使您在您的网站中轻松实现这一目标。我也在演示中使用了 jQuery。

于 2013-08-05T19:59:04.720 回答
0

为此，您必须使用 javascript，而 JQuery 使它变得非常容易。首先，将您的#dimmerdiv 直接放在body您的 html 中 - 如果它的任何父元素具有绝对、固定或相对定位，则将其放置得更深可能只会使页面的一部分变暗。其次，在您的按钮上添加一个单击事件以取消隐藏调光器。这很容易用一点 JQuery（我没有测试过）：

$('#dim_button').click(function() {
    $('#dimmer').show(); });

（您必须确保在此代码运行时按钮已加载，否则它不会执行任何操作。最好的方法是将其包装在 a 中$('document').ready(function{});）

请注意，在某些较旧的浏览器中，dimmer div 将通过位于页面顶部来阻止用户单击其中的任何内容，从而可能使您的页面无法使用。如果您正在调暗页面以便在其上放置一个弹出窗口，请确保关闭弹出窗口也会移除调光器。另请注意，在大多数（所有？）较新的浏览器中，用户将能够单击调光器并与下面的页面进行交互，这可能不是您想要的。

于 2013-08-05T19:40:00.450 回答