JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例

下面是 "JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例" 的攻略，一步一步来讲解。

1. 准备工作

首先，在 HTML 文件中添加一个按钮和一个 div 容器，我们将在弹出层中显示该容器：

<button id="show-popup">显示弹出层</button>
<div id="popup-container">
  <h2>标题</h2>
  <p>弹出层内容</p>
  <button id="close-popup">关闭</button>
</div>

2. 导入 CSS 文件

接下来，我们要为弹出层编写 CSS 样式。将以下代码保存为一个单独的 CSS 文件：

#popup-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  padding: 20px;
  display: none;
}

#popup-container h2 {
  font-size: 24px;
  margin-top: 0;
}

#popup-container p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

#close-popup {
  float: right;
}

3. JS 实现弹出层

接下来，我们要实现 JS 代码来显示和隐藏弹出层，以及让弹出层可拖拽。

var popup = document.getElementById("popup-container");
var showPopupBtn = document.getElementById("show-popup");
var closePopupBtn = document.getElementById("close-popup");

// 点击按钮显示弹出层
showPopupBtn.addEventListener("click", function () {
  popup.style.display = "block";
});

// 点击关闭按钮隐藏弹出层
closePopupBtn.addEventListener("click", function () {
  popup.style.display = "none";
});

// 让弹出层可拖拽
var isDragging = false;
var lastX = 0;
var lastY = 0;

popup.addEventListener("mousedown", function (e) {
  isDragging = true;
  lastX = e.clientX;
  lastY = e.clientY;
});

popup.addEventListener("mouseup", function (e) {
  isDragging = false;
});

popup.addEventListener("mousemove", function (e) {
  if (isDragging) {
    var deltaX = e.clientX - lastX;
    var deltaY = e.clientY - lastY;
    var left = parseInt(popup.style.left) || 0;
    var top = parseInt(popup.style.top) || 0;
    popup.style.left = left + deltaX + "px";
    popup.style.top = top + deltaY + "px";
    lastX = e.clientX;
    lastY = e.clientY;
  }
});

4. 示例说明

示例 1：同时弹出两个内容不同的弹出层

HTML 代码：

<button class="show-popup" data-target="#popup-1">显示弹出层1</button>
<div id="popup-1" class="popup">
  <h2>弹出层1</h2>
  <p>这是弹出层1的内容。</p>
  <button class="close-popup">关闭</button>
</div>

<button class="show-popup" data-target="#popup-2">显示弹出层2</button>
<div id="popup-2" class="popup">
  <h2>弹出层2</h2>
  <p>这是弹出层2的内容。</p>
  <button class="close-popup">关闭</button>
</div>

JS 代码：

var showPopupBtns = document.querySelectorAll(".show-popup");
var popupContainers = document.querySelectorAll(".popup");
var closePopupBtns = document.querySelectorAll(".close-popup");

// 显示弹出层
showPopupBtns.forEach(function (btn) {
  btn.addEventListener("click", function () {
    var target = this.getAttribute("data-target");
    var $popup = document.querySelector(target);
    $popup.style.display = "block";
  });
});

// 关闭弹出层
closePopupBtns.forEach(function (btn) {
  btn.addEventListener("click", function () {
    var $popup = btn.parentNode;
    $popup.style.display = "none";
  });
});

// 让弹出层可拖拽
popupContainers.forEach(function (popup) {
  var isDragging = false;
  var lastX = 0;
  var lastY = 0;

  popup.addEventListener("mousedown", function (e) {
    isDragging = true;
    lastX = e.clientX;
    lastY = e.clientY;
  });

  popup.addEventListener("mouseup", function (e) {
    isDragging = false;
  });

  popup.addEventListener("mousemove", function (e) {
    if (isDragging) {
      var deltaX = e.clientX - lastX;
      var deltaY = e.clientY - lastY;
      var left = parseInt(popup.style.left) || 0;
      var top = parseInt(popup.style.top) || 0;
      popup.style.left = left + deltaX + "px";
      popup.style.top = top + deltaY + "px";
      lastX = e.clientX;
      lastY = e.clientY;
    }
  });
});

示例 2：添加弹出层背景遮罩

HTML 代码：

<button id="show-popup">显示弹出层</button>
<div id="popup-container">
  <h2>标题</h2>
  <p>弹出层内容</p>
  <button id="close-popup">关闭</button>
</div>
<div class="popup-overlay"></div>

CSS 代码：

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

.popup-overlay.show {
  display: block;
}

JS 代码：

var popup = document.getElementById("popup-container");
var showPopupBtn = document.getElementById("show-popup");
var closePopupBtn = document.getElementById("close-popup");
var overlay = document.querySelector(".popup-overlay");

// 点击按钮显示弹出层和遮罩
showPopupBtn.addEventListener("click", function () {
  popup.style.display = "block";
  overlay.classList.add("show");
});

// 点击关闭按钮隐藏弹出层和遮罩
closePopupBtn.addEventListener("click", function () {
  popup.style.display = "none";
  overlay.classList.remove("show");
});

// 点击遮罩隐藏弹出层和遮罩
overlay.addEventListener("click", function () {
  popup.style.display = "none";
  overlay.classList.remove("show");
});

// 让弹出层可拖拽
var isDragging = false;
var lastX = 0;
var lastY = 0;

popup.addEventListener("mousedown", function (e) {
  isDragging = true;
  lastX = e.clientX;
  lastY = e.clientY;
});

popup.addEventListener("mouseup", function (e) {
  isDragging = false;
});

popup.addEventListener("mousemove", function (e) {
  if (isDragging) {
    var deltaX = e.clientX - lastX;
    var deltaY = e.clientY - lastY;
    var left = parseInt(popup.style.left) || 0;
    var top = parseInt(popup.style.top) || 0;
    popup.style.left = left + deltaX + "px";
    popup.style.top = top + deltaY + "px";
    lastX = e.clientX;
    lastY = e.clientY;
  }
});

通过上述两种示例以上，即可实现可拖拽的漂亮圆角特效弹出层，希望对你有所帮助。