Question

希望不要太模糊。我想要做的就是在点击链接后让整个页面变暗。我认为让div style="height:100%; width=100%;"的{{1}}为高z-index。覆盖网页。我的问题是切换这个div。我不确定我应该用什么才能做到这一点。

Answer 1

演示using jQuery 或 using bog-standard Javascript ，两者都显示了如何切换元素。

HTML 您没有说出如何切换此内容。使用按钮？

<button onclick="dim();">Dim</button>
<div id="dimmer"></div>

但请记住，调光器会越过按钮

<强> CSS

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

N.B。使用position: fixed作为100％高度只是窗口高度，如果文档较大，使用position: absolute不会使整个文档变暗 - 您可以滚动查看内容是否可见。

<强>的Javascript

function dim(bool)
{
    if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
    document.getElementById('dimmer').style.display=(bool?'block':'none');
}    

dim(true); // on
dim(false); // off

Answer 2

您可以使用简单的JavaScript

来完成

Demo

HTML

<a href="#" onclick="dim_div()">Click me</a>
<div id="toggle_div"></div>
Hello World

的JavaScript

function dim_div() {
    document.getElementById("toggle_div").style.display="block";
}

CSS

#toggle_div {
    background-color: rgba(255, 255, 255, .6);
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 999;
}

Answer 3

HTML

\t

CSS

        try(BufferedReader data = new BufferedReader(new FileReader(roadFile));) {
            String line = null;
            String delim = "\t";
            while((line = br.readLine()) != null){
                StringTokenizer tok = new StringTokenizer(line, delim);
                while(tok.hasMoreTokens()){
                    String nextToken = tok.nextToken();
                    //do stuff with the nextToken String
                }
            }
        } catch (IOException e) {
            e.printStackTrace();
        }

JavaScript的：

<div id="initial_opacity_zero"></div>
<button id="button_to_adjust_opacity" onclick="func_onclick();"></button>

单击创建灰色背景

3 个答案: