Я работаю на сайте, где использую эффект наложения.Я нашел, как это сделать в школах W3, и это довольно просто.
Однако я пытаюсь сделать два отдельных наложения на одной странице: нажмите одну кнопку, чтобы увидеть один набор текста, нажмите второйчтобы увидеть другое.
У меня проблема в том, что я не знаю, как различать отдельные наложения.В моем примере ниже, если пользователь нажимает на первую кнопку наложения, тогда получим текст, предназначенный для второго наложения.И если они нажимают на вторую кнопку наложения, они получают текст, предназначенный для второго наложения.Другими словами, я не могу отобразить первый оверлейный текст.
Я представляю, что это что-то довольно простое, но я не понял этого сам.
Нижеэто какой-то код.Это не мой настоящий сайт, а слегка отредактированная версия того, что предлагается на W3.Если бы я мог научиться различать две кнопки здесь, я мог бы сделать это на своем собственном сайте.
Спасибо за вашу помощь.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<style>
#overlay1 {
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;
}
#overlay2 {
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;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<!-- Overlay 1: -->
<div id="overlay1" onclick="off()">
<div id="text">Overlay 1 Text</div>
</div>
<div style="padding:20px">
<h2>Overlay with Text Examples</h2>
<button onclick="on()">Overlay 1</button>
</div>
<script>
function on() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay1").style.display = "none";
}
</script>
<!-- Overlay2: -->
<div id="overlay2" onclick="off()">
<div id="text">Overlay 2 Text</div>
</div>
<div style="padding:20px">
<button onclick="on()">Overlay 2</button>
</div>
<script>
function on() {
document.getElementById("overlay2").style.display = "block";
}
function off() {
document.getElementById("overlay2").style.display = "none";
}
</script>
</body>
</html>