Как создать наложение, которое охватывает только определенный контейнер, а не всю HTML-страницу? - PullRequest
Новая
       1

Как создать наложение, которое охватывает только определенный контейнер, а не всю HTML-страницу?

0 голосов
/ 21 мая 2018

Я пытаюсь создать оверлейный контейнер или модал, который покрывает только определенный контейнер на странице.У меня есть это. 

#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 и ничего больше.Как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

используйте относительное как Положение. 

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>
0 голосов
/ 21 мая 2018

Для этого нужно сделать - 

//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";
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...