引导带| “关闭”图标，用于关闭带有示例的内容(1)

📌 相关文章

📜 引导带| “关闭”图标，用于关闭带有示例的内容(1)

📅 最后修改于: 2023-12-03 15:25:34.372000 🧑 作者: Mango

引导带| “关闭”图标，用于关闭带有示例的内容

在很多网站、应用程序中，我们经常需要展示一些带有示例的内容，例如代码片段、教程文档等。在这些内容中添加一个“关闭”按钮是十分方便的，用户可以随时关闭这个弹出框，以便更好的聚焦于主要内容。

实现方法

实现这个功能的方法很简单，只需要使用HTML、CSS和JavaScript即可。

HTML

在HTML中，我们需要设置一个父元素来包含我们的示例内容和关闭按钮。关闭按钮可以使用一个X形状的SVG图标，或者是一个简单的文本链接。同时，为了实现关闭功能，我们需要给这个按钮添加一个点击事件监听器。

<div class="example">
  <p>这里是示例内容</p>
  <a class="close-button" href="javascript:void(0)">关闭</a>
</div>

CSS

我们希望示例内容是居中的，并且有一定的边距以增加可读性。我们还可以设置一个半透明的背景遮罩，以帮助突出显示内容并使其更易读。

.example {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.example:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
}
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  text-decoration: none;
  color: #333;
}

JavaScript

为了实现点击按钮关闭示例内容的功能，我们需要添加一个click事件监听器。当用户单击关闭按钮时，我们使用JavaScript代码找到窗口中的示例内容并将其隐藏。

const closeButton = document.querySelector('.close-button');
const example = document.querySelector('.example');

closeButton.addEventListener('click', function() {
  example.style.display = 'none';
});

示例

使用以上提供的HTML、CSS和JavaScript代码，我们可以创建一个这样的示例。

<!DOCTYPE html>
<html>
<head>
  <title>示例</title>
  <style>
    .example {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      max-width: 600px;
      background: #fff;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }
    .example:before {
      content: '';
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
    }
    .close-button {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 18px;
      text-decoration: none;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>示例页面</h1>
  <p>这里是示例页面的主要内容。</p>

  <div class="example">
    <p>示例内容可以包含代码片段、教程文档等。</p>
    <p>这是一段示例代码：</p>
    <pre><code>console.log('Hello, world!');</code></pre>
    <a class="close-button" href="javascript:void(0)">关闭</a>
  </div>

  <script>
    const closeButton = document.querySelector('.close-button');
    const example = document.querySelector('.example');

    closeButton.addEventListener('click', function() {
      example.style.display = 'none';
    });
  </script>
</body>
</html>

总结

引导带| “关闭”图标，用于关闭带有示例的内容的功能为用户提供了方便，使得示例内容可以更好的展示在用户面前，让用户可以更加清晰地观察和理解。在编写网站、应用程序时，这是一个很有用且必要的功能。