html弹出窗口是浮动,JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

好的，下面是使用 JS 实现弹出浮动窗口的详细步骤：

1. HTML 结构

首先，我们需要在 HTML 中添加一个按钮，用于触发弹出浮动窗口的事件。同时，为了方便后续操作，我们需要在 HTML 中添加一个空的 div 元素，用于存放弹出浮动窗口的内容。

<button id="open-btn">打开浮动窗口</button>
<div id="float-window"></div>

2. CSS 样式

接下来，我们需要为浮动窗口添加样式。这里我们使用绝对定位来实现浮动效果，同时添加一些基本的样式，如背景颜色、边框样式等。

#float-window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
  display: none; /* 默认隐藏 */
}

3. JS 代码

最后，我们需要使用 JS 代码来实现弹出浮动窗口的功能。具体步骤如下：

1. 获取按钮元素和浮动窗口元素，并添加事件监听器。

var openBtn = document.getElementById('open-btn');
var floatWindow = document.getElementById('float-window');

openBtn.addEventListener('click', function() {
  floatWindow.style.display = 'block';
});

2. 实现拖拽效果。

var isDragging = false; // 是否正在拖动
var mouseOffset = { x: 0, y: 0 }; // 鼠标相对于浮动窗口的偏移量

floatWindow.addEventListener('mousedown', function(e) {
  isDragging = true;
  mouseOffset.x = e.pageX - floatWindow.offsetLeft;
  mouseOffset.y = e.pageY - floatWindow.offsetTop;
});

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    floatWindow.style.left = e.pageX - mouseOffset.x + 'px';
    floatWindow.style.top = e.pageY - mouseOffset.y + 'px';
  }
});

document.addEventListener('mouseup', function() {
  isDragging = false;
});

3. 实现关闭效果。

var closeBtn = document.createElement('div');
closeBtn.innerHTML = '关闭';
closeBtn.style.position = 'absolute';
closeBtn.style.top = '10px';
closeBtn.style.right = '10px';
floatWindow.appendChild(closeBtn);

closeBtn.addEventListener('click', function() {
  floatWindow.style.display = 'none';
});

最终的 JS 代码如下：

var openBtn = document.getElementById('open-btn');
var floatWindow = document.getElementById('float-window');

openBtn.addEventListener('click', function() {
  floatWindow.style.display = 'block';
});

var isDragging = false; // 是否正在拖动
var mouseOffset = { x: 0, y: 0 }; // 鼠标相对于浮动窗口的偏移量

floatWindow.addEventListener('mousedown', function(e) {
  isDragging = true;
  mouseOffset.x = e.pageX - floatWindow.offsetLeft;
  mouseOffset.y = e.pageY - floatWindow.offsetTop;
});

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    floatWindow.style.left = e.pageX - mouseOffset.x + 'px';
    floatWindow.style.top = e.pageY - mouseOffset.y + 'px';
  }
});

document.addEventListener('mouseup', function() {
  isDragging = false;
});

var closeBtn = document.createElement('div');
closeBtn.innerHTML = '关闭';
closeBtn.style.position = 'absolute';
closeBtn.style.top = '10px';
closeBtn.style.right = '10px';
floatWindow.appendChild(closeBtn);

closeBtn.addEventListener('click', function() {
  floatWindow.style.display = 'none';
});

这样，我们就完成了使用 JS 实现弹出浮动窗口的功能。