JS控制弹出悬浮窗口(一览画面)的实例代码

这里给您详细讲解一下 JS 控制弹出悬浮窗口的实例代码的攻略。下面是具体步骤：

1. 给HTML添加悬浮窗口基本元素

首先，在 HTML 文档中添加弹出悬浮窗口的基本元素，包括触发弹出的按钮和整个弹出窗口的框架结构。代码示例如下：

<button id="open-popup">点击打开弹出窗口</button>
<div id="popup-container">
  <div id="popup">
    <h2>这是弹出窗口的标题</h2>
    <p>这里是弹出窗口的内容。</p>
    <button id="close-popup">关闭</button>
  </div>
</div>

2. 添加CSS样式

为了美化弹出窗口并实现隐藏功能，需要添加一些CSS样式。具体代码如下：

#popup-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: none;
}

#popup {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}

#popup h2 {
  margin-top: 0;
}

#close-popup {
  position: absolute;
  top: 10px;
  right: 10px;
}

3. 使用JavaScript控制悬浮窗口的显示和隐藏

接下来，需要使用JavaScript来控制弹出窗口的显示和隐藏。具体代码如下：

// 获取弹出窗口元素和关闭按钮元素
var popupContainer = document.getElementById('popup-container');
var popup = document.getElementById('popup');
var closePopup = document.getElementById('close-popup');

// 点击按钮打开弹出窗口
document.getElementById('open-popup').addEventListener('click', function() {
  popupContainer.style.display = 'block';
});

// 点击关闭按钮关闭弹出窗口
closePopup.addEventListener('click', function() {
  popupContainer.style.display = 'none';
});

// 点击背景关闭弹出窗口
popupContainer.addEventListener('click', function(e) {
  if (e.target === this) {
    popupContainer.style.display = 'none';
  }
});

以上就是JS控制弹出悬浮窗口的实例代码的完整攻略。

下面还给您两个示例说明：

1. 当鼠标放置在按钮上时弹出悬浮窗口

需求：当鼠标放置在按钮上时弹出悬浮窗口。

解决办法：将“打开弹出窗口”的触发事件修改为“鼠标移入”事件。代码如下：

var popupContainer = document.getElementById('popup-container');

document.getElementById('open-popup').addEventListener('mouseover', function() {
  popupContainer.style.display = 'block';
});

// 点击关闭按钮关闭弹出窗口
document.getElementById('close-popup').addEventListener('click', function() {
  popupContainer.style.display = 'none';
});

// 点击背景关闭弹出窗口
popupContainer.addEventListener('click', function(e) {
  if (e.target === this) {
    popupContainer.style.display = 'none';
  }
});

2. 点击其他区域关闭悬浮窗口

需求：点击页面的其他区域时关闭弹出窗口。

解决办法：在弹出窗口的背景层上绑定点击事件，如果鼠标点击的是背景层本身，则关闭弹出窗口。代码如下：

var popupContainer = document.getElementById('popup-container');

document.getElementById('open-popup').addEventListener('click', function() {
  popupContainer.style.display = 'block';
});

// 点击关闭按钮关闭弹出窗口
document.getElementById('close-popup').addEventListener('click', function() {
  popupContainer.style.display = 'none';
});

// 点击背景关闭弹出窗口
popupContainer.addEventListener('click', function(e) {
  if (e.target === this) {
    popupContainer.style.display = 'none';
  }
});

// 点击页面其他区域也要关闭弹出窗口
document.addEventListener('click', function(e) {
  if (!document.getElementById('popup-container').contains(e.target) && e.target !== document.getElementById('open-popup')) {
    document.getElementById('popup-container').style.display = 'none';
  }
});