0

我正在尝试创建一个覆盖容器或模式，它只覆盖页面上的某个容器。我有这个。

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}
</style>
</head>
<body>

<div id="overlay" onclick="off()"></div>

<div style="padding:20px; border: 3px solid black;" id="my_main_div">
  <h2>Overlay</h2>
  <p>Add an overlay effect to the page content (100% width and height with a black background color with 50% opacity).</p>
  <button onclick="on()">Turn on overlay effect</button>
</div>

<script>
function on() {
    document.getElementById("overlay").style.display = "block";
}

function off() {
    document.getElementById("overlay").style.display = "none";
}
</script>

但是这个覆盖覆盖了所有页面。而我希望它只覆盖而 my_main_div不是其他任何东西。我怎样才能做到这一点？

4

2 回答 2

0

使用相对作为位置。

function on() {
    document.getElementById("overlay").style.display = "block";
}

function off() {
    document.getElementById("overlay").style.display = "none";
}
.row {
  position: relative;
}
#overlay {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}
<div class="row">
<div id="overlay" onclick="off()"></div>

<div style="padding:20px; border: 3px solid black;" id="my_main_div">
  <h2>Overlay</h2>
  <p>Add an overlay effect to the page content (100% width and height with a black background color with 50% opacity).</p>
  <button onclick="on()">Turn on overlay effect</button>
</div>
</div>

于 2018-05-22T13:35:06.057 回答
0

要做到这一点，你需要做 -

//html

<div style="padding:20px; border: 3px solid black;" id="my_main_div">
    <div id="overlay" onclick="off()"></div>
    <h2>Overlay</h2>
    <p>Add an overlay effect to the page content (100% width and height with a black background color with 50% opacity).</p>
    <button onclick="on()">Turn on overlay effect</button>
</div>

//css

#my_main_div {
  position: relative;
}

#overlay {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}

// js

function on() {
    document.getElementById("overlay").style.display = "block";
}

function off() {
    document.getElementById("overlay").style.display = "none";
}
于 2018-05-21T09:47:53.123 回答