如何在 HTML 中实现多个全屏覆盖？

Question

I'm pretty new to web development and I'm trying to create a series of buttons that, when clicked, triggers an overlay specific to that button.我对 web 开发非常陌生，我正在尝试创建一系列按钮，单击这些按钮会触发特定于该按钮的覆盖。 The following code from W3schools creates a button and the overlay effect.以下来自W3schools的代码创建了一个按钮和覆盖效果。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#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;
}

#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>

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

<div style="padding:20px">
  <h2>Overlay with Text</h2>
  <button onclick="on()">Button 1</button>
</div>

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

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

How can I modify this code to add another button that, when clicked, displays <div id="text">Text 2</div> within the overlay?如何修改此代码以添加另一个按钮，单击该按钮时会在叠加层中显示<div id="text">Text 2</div> ？ So, when Button 1 is clicked, "Text 1" is displayed within the overlay and when Button 2 is clicked, "Text 2" is displayed.因此，当单击按钮 1 时，“文本 1”会显示在叠加层中，当单击按钮 2 时，会显示“文本 2”。

Answer 1

A way you can do this is by giving your overlays classes with which you can select them from JavaScript.你可以做到这一点的一种方法是提供你的覆盖类，你可以使用这些类从 JavaScript 中获得 select。 Give each overlay a unique id to identify it with.给每个叠加层一个唯一的 id 来识别它。

<div class="overlay js-overlay" id="overlay-one" hidden>
  ...
</div>

Now you buttons should also have a class to identify them with.现在你的按钮也应该有一个 class 来识别它们。 Give your button a value attribute in which you set the id of the overlay that the button belongs to.为您的按钮提供一个value属性，您可以在其中设置按钮所属的叠加层的id 。

<button class="js-overlay-trigger" type="button" value="overlay-one">Open overlay</button>

Now in JavaScript.现在在 JavaScript。 Select all buttons with document.querySelectorAll . Select 所有带有document.querySelectorAll的按钮。 Loop over each button and add an event listener to it.循环遍历每个按钮并向其添加事件侦听器。 This is (almost) the same as an onclick attribute, but you gives you much more flexibility and imo should be used in favor of the inline attribute.这（几乎）与onclick属性相同，但是您提供了更多的灵活性，并且应该使用 imo 来支持 inline 属性。

Create a function that reads the value of the clicked button, this contains the id of the overlay we need.创建一个读取点击按钮的value的 function，其中包含我们需要的叠加层的id 。 Select the element from the document based on the value in the value property. Select 来自文档的元素基于value属性中的值。 If the overlay is found, then the overlay will be shown.如果找到覆盖，则将显示覆盖。

const triggers = document.querySelectorAll('.js-overlay-trigger');

function showOverlay(event) {
  const selector = event.target.value;
  const overlay = document.getElementById(selector);
  if (overlay !== null) {
    overlay.hidden = false;
  }
}

for (const trigger of triggers) {
  trigger.addEventListener('click', showOverlay);
}

This example uses the hidden attribute and property to show overlay.此示例使用hidden属性和属性来显示覆盖。 But you can also add or remove CSS classes to get the same behavior.但您也可以添加或删除 CSS 类以获得相同的行为。 The style property should be used as a last resort. style属性应该作为最后的手段。

如何在 HTML 中实现多个全屏覆盖？

问题描述

1 个解决方案

解决方案1
0 2022-01-13 20:03:44

如何在 HTML 中实现多个全屏覆盖？

问题描述

1 个解决方案

解决方案1 0 2022-01-13 20:03:44

解决方案1
0 2022-01-13 20:03:44