启用弹出窗口的调整大小功能

要启用弹出窗口的调整大小功能，可以使用JavaScript和CSS来实现。以下是一个示例代码，演示如何创建一个可以调整大小的弹出窗口：

HTML:

<div id="popup" class="popup">
  <div class="popup-content">
    <!-- 弹出窗口的内容 -->
  </div>
  <div class="resize-handle"></div>
</div>

CSS:

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  overflow: hidden;
}

.resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background-color: #000;
  cursor: nwse-resize;
}

JavaScript:

var popup = document.getElementById('popup');
var handle = document.querySelector('.resize-handle');
var isResizing = false;

handle.addEventListener('mousedown', initResize);
document.addEventListener('mousemove', startResize);
document.addEventListener('mouseup', stopResize);

function initResize(e) {
  isResizing = true;
  lastX = e.clientX;
  lastY = e.clientY;
}

function startResize(e) {
  if (!isResizing) return;
  
  var dx = e.clientX - lastX;
  var dy = e.clientY - lastY;

  var newWidth = parseInt(window.getComputedStyle(popup).width) + dx;
  var newHeight = parseInt(window.getComputedStyle(popup).height) + dy;

  popup.style.width = newWidth + 'px';
  popup.style.height = newHeight + 'px';

  lastX = e.clientX;
  lastY = e.clientY;
}

function stopResize() {
  isResizing = false;
}

这段代码使用了一个CSS样式来定义弹出窗口的样式，包括宽度、高度、背景色等。在JavaScript中，我们使用了鼠标事件来启用调整大小功能。mousedown事件初始化调整大小，mousemove事件在调整大小过程中改变窗口的尺寸，mouseup事件停止调整大小。这样，当用户点击并拖动调整大小手柄时，弹出窗口的大小会相应地改变。