Question

我正在制作一个CSS和HTML网站（其中包括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吗？

Answer 1

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

Answer 2

你必须使用javascript，而JQuery让它变得非常简单。首先，将您的#dimmer div直接放在您的html的body内 - 如果其任何父元素具有绝对，固定或相对定位，则将其放在更深处会导致仅使页面部分变暗的风险。其次，在按钮上添加一个取消隐藏调光器的点击事件。使用一点JQuery（我还没有测试过）这很容易：

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

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

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

按钮使整个页面变暗？

2 个答案: