让你的网页更互动：轻松打造一个可拖拽、可调节大小的弹窗

2023-12-10 23:05:56

创建基本结构

首先，我们需要定义HTML结构来支持我们的弹窗。这个基本的结构包括一个按钮用于触发弹出，以及一个包含内容和调整功能的主要弹窗元素。

<button id="openModal">打开弹窗</button>
<div id="modal" class="modal">
  <div class="content">
    这里是模态对话框的内容。
  </div>
</div>

设计CSS样式

接下来，定义一些基本的CSS以美化我们的弹窗和设置其默认位置。

.modal {
  position: absolute;
  width: 200px;
  height: 150px;
  background-color: #fff;
  border: 1px solid black;
}

.content {
  padding: 20px;
}

JavaScript实现拖拽功能

在JavaScript部分，我们需要添加拖拽功能。这涉及到监听鼠标事件来计算鼠标的移动并相应地调整弹窗的位置。

let modal = document.getElementById('modal');
let isDragging = false;
let offsetX, offsetY;

modal.addEventListener('mousedown', (e) => {
  isDragging = true;
  offsetX = e.clientX - modal.offsetLeft;
  offsetY = e.clientY - modal.offsetTop;
});

document.addEventListener('mousemove', (e) => {
  if(isDragging) {
    modal.style.left = `${e.clientX - offsetX}px`;
    modal.style.top = `${e.clientY - offsetY}px`;
  }
});

document.addEventListener('mouseup', () => isDragging = false);

实现可调节大小功能

要实现弹窗的可调节大小功能，需要在CSS中设置resize属性，并使用JavaScript处理调整大小后的事件。

.modal {
  /* 上面的样式 */
  resize: both;
}

对于JavaScript部分：

modal.addEventListener('resize', () => {
  // 调整大小后可以执行的操作，例如更新内容布局。
});

注意：resize属性不支持在所有浏览器上触发事件。因此，在实际使用中需要确保有良好的兼容性处理。

结合弹窗的显示与隐藏

为了让用户能够打开和关闭弹窗，我们需要添加相应的功能来控制其显示状态。

document.getElementById('openModal').addEventListener('click', function() {
  modal.style.display = 'block';
});

modal.addEventListener('mousedown', (e) => {
  if(e.target === modal){
    modal.style.display = 'none';
  }
});