简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器

实现一个简单漂亮的 js 弹窗并让其可自由拖拽需要以下步骤：

实现一个简单漂亮的 js 弹窗并让其可自由拖拽需要以下步骤：

1. 确定弹窗的外观和属性，如弹窗大小、标题、内容等。可以使用 HTML 和 CSS 来实现。

示例代码：

<div id="popup">
  <h3 class="title">弹窗标题</h3>
  <p class="content">弹窗内容</p>
</div>

<style>
/* 弹窗样式 */
#popup {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 10px #ccc;
  position: fixed; /* 固定定位，便于拖动 */
}

/* 标题样式 */
.title {
  font-size: 16px;
  font-weight: bold;
  padding: 10px;
  margin: 0;
}

/* 内容样式 */
.content {
  margin: 10px;
}
</style>

1. 实现拖拽功能。可以使用原生 JS 或第三方库（如 jQuery）来实现。

示例代码（使用原生 JS）：

// 获取弹窗元素
var popup = document.querySelector('#popup');

// 鼠标按下时记录弹窗的初始位置和鼠标的初始位置
popup.onmousedown = function(e) {
  var startX = e.clientX;
  var startY = e.clientY;
  var popupX = popup.offsetLeft;
  var popupY = popup.offsetTop;

  // 鼠标移动时计算弹窗的新位置
  document.onmousemove = function(e) {
    var newX = e.clientX - startX + popupX;
    var newY = e.clientY - startY + popupY;

    // 避免弹窗移出可视区域
    if (newX < 0) {
      newX = 0;
    }
    if (newY < 0) {
      newY = 0;
    }
    if (newX > document.documentElement.clientWidth - popup.offsetWidth) {
      newX = document.documentElement.clientWidth - popup.offsetWidth;
    }
    if (newY > document.documentElement.clientHeight - popup.offsetHeight) {
      newY = document.documentElement.clientHeight - popup.offsetHeight;
    }

    // 移动弹窗
    popup.style.left = newX + 'px';
    popup.style.top = newY + 'px';
  }

  // 鼠标松开时停止计算
  document.onmouseup = function() {
    document.onmousemove = null;
    document.onmouseup = null;
  }
};

1. 兼容不同浏览器。在实现拖拽功能时，要注意不同浏览器之间的差异。例如，在获取鼠标位置时，Firefox 使用 e.pageX 和 e.pageY，而其他浏览器使用 e.clientX 和 e.clientY。

另外，还可以使用 Polyfill 来解决一些浏览器兼容性问题，如 IE8 不支持 querySelector 和 classList 等。

至此，一个简单漂亮的 js 弹窗可自由拖拽的攻略就完成了。可以根据实际需求对弹窗的样式和拖拽功能进行调整和扩展。

示例代码（使用 jQuery）：

// 获取弹窗元素
var $popup = $('#popup');

// 鼠标按下时记录弹窗的初始位置和鼠标的初始位置
$popup.on('mousedown', function(e) {
  var startX = e.clientX;
  var startY = e.clientY;
  var popupX = $popup.offset().left;
  var popupY = $popup.offset().top;

  // 鼠标移动时计算弹窗的新位置
  $(document).on('mousemove', function(e) {
    var newX = e.clientX - startX + popupX;
    var newY = e.clientY - startY + popupY;

    // 避免弹窗移出可视区域
    if (newX < 0) {
      newX = 0;
    }
    if (newY < 0) {
      newY = 0;
    }
    if (newX > $(document).width() - $popup.outerWidth()) {
      newX = $(document).width() - $popup.outerWidth();
    }
    if (newY > $(document).height() - $popup.outerHeight()) {
      newY = $(document).height() - $popup.outerHeight();
    }

    // 移动弹窗
    $popup.css({
      left: newX + 'px',
      top: newY + 'px'
    });
  });

  // 鼠标松开时停止计算
  $(document).on('mouseup', function() {
    $(document).off('mousemove');
    $(document).off('mouseup');
  });
});