js点击出现悬浮窗效果不使用JQuery插件

下面是使用纯 JavaScript 实现点击出现悬浮窗效果的攻略：

准备工作

在 HTML 文件中，需要添加一个按钮元素以及一个悬浮窗的 HTML 结构。其中，悬浮窗需要设置为 display: none;，即默认不可见。

<button id="btn">点击显示悬浮窗</button>

<div id="popup">
  <h2>这是一个悬浮窗</h2>
  <p>悬浮窗的内容可以放在这里</p>
</div>

接下来，在 CSS 中设置按钮和悬浮窗的样式：

#btn {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  background-color: #4CAF50;
  color: #FFF;
  border: none;
}

#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFF;
  padding: 1rem;
  border: 1px solid #CCC;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  display: none;
}

实现点击事件

使用 JavaScript 监听按钮的点击事件，当点击时，悬浮窗的 display 属性设置为 block，即显示悬浮窗。

var btn = document.getElementById('btn');
var popup = document.getElementById('popup');

btn.addEventListener('click', function() {
  popup.style.display = 'block';
});

但是，这个实现方式还存在一个问题：当点击悬浮窗以外的地方，悬浮窗并没有消失。因此，还需要为页面添加一个点击事件，在单击页面时判断是否点击了悬浮窗以外的地方。如果是，则把悬浮窗隐藏起来。

document.addEventListener('click', function(event) {
  if (event.target !== popup && event.target !== btn) {
    popup.style.display = 'none';
  }
});

完整的 HTML、CSS 和 JavaScript 代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>点击出现悬浮窗效果</title>
  <style>
    #btn {
      font-size: 1rem;
      padding: 0.5rem 1rem;
      background-color: #4CAF50;
      color: #FFF;
      border: none;
    }

    #popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #FFF;
      padding: 1rem;
      border: 1px solid #CCC;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      display: none;
    }
  </style>
</head>
<body>
  <button id="btn">点击显示悬浮窗</button>

  <div id="popup">
    <h2>这是一个悬浮窗</h2>
    <p>悬浮窗的内容可以放在这里</p>
  </div>

  <script>
    var btn = document.getElementById('btn');
    var popup = document.getElementById('popup');

    btn.addEventListener('click', function() {
      popup.style.display = 'block';
    });

    document.addEventListener('click', function(event) {
      if (event.target !== popup && event.target !== btn) {
        popup.style.display = 'none';
      }
    });
  </script>
</body>
</html>

下面是两个示例：

示例一：使用内联样式

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>点击出现悬浮窗效果</title>
</head>
<body>
  <button id="btn" style="font-size: 1rem; padding: 0.5rem 1rem; background-color: #4CAF50; color: #FFF; border: none;">点击显示悬浮窗</button>

  <div id="popup" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #FFF; padding: 1rem; border: 1px solid #CCC; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); display: none;">
    <h2>这是一个悬浮窗</h2>
    <p>悬浮窗的内容可以放在这里</p>
  </div>

  <script>
    var btn = document.getElementById('btn');
    var popup = document.getElementById('popup');

    btn.addEventListener('click', function() {
      popup.style.display = 'block';
    });

    document.addEventListener('click', function(event) {
      if (event.target !== popup && event.target !== btn) {
        popup.style.display = 'none';
      }
    });
  </script>
</body>
</html>

示例二：优化 CSS 样式

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>点击出现悬浮窗效果</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    button {
      font-size: 1rem;
      padding: 0.5rem 1rem;
      background-color: #4CAF50;
      color: #FFF;
      border: none;
    }

    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #FFF;
      padding: 1rem;
      border: 1px solid #CCC;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      display: none;
    }

    .popup h2 {
      margin-top: 0;
    }

    .popup p {
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <button id="btn">点击显示悬浮窗</button>

  <div id="popup" class="popup">
    <h2>这是一个悬浮窗</h2>
    <p>悬浮窗的内容可以放在这里</p>
  </div>

  <script>
    var btn = document.getElementById('btn');
    var popup = document.getElementById('popup');

    btn.addEventListener('click', function() {
      popup.style.display = 'block';
    });

    document.addEventListener('click', function(event) {
      if (event.target !== popup && event.target !== btn) {
        popup.style.display = 'none';
      }
    });
  </script>
</body>
</html>

希望以上内容能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js点击出现悬浮窗效果不使用JQuery插件 - Python技术站

js点击出现悬浮窗效果不使用JQuery插件

准备工作

实现点击事件

示例一：使用内联样式

示例二：优化 CSS 样式

相关文章