JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解-前端开发

这里就为你详细讲解一下如何实现JS弹出浮动窗口，包括拖动和关闭功能。

这里就为你详细讲解一下如何实现JS弹出浮动窗口，包括拖动和关闭功能。

准备工作

首先，我们需要在HTML文件里引入以下JS和CSS文件：

<link rel="stylesheet" href="style.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="dialog.js"></script>

其中，style.css包含了弹窗的样式，dialog.js包含了弹窗的逻辑代码。以上1.12.4版本的jQuery库只是示例，大家可以根据自己的需要引入适合的版本。

实现过程

第一步：创建弹窗标签

在HTML文件中创建一个div标签，作为弹窗的容器。我们可以将它设为display:none，默认不显示：

<div id="dialog" style="display:none;">
  <div class="dialog_title">弹窗标题</div>
  <div class="dialog_content">弹窗内容</div>
  <div class="dialog_close">X</div>
</div>

以上代码中，我们通过jQuery选择器获取id为dialog的标签，并设置其默认样式为display:none，表示不显示。同时，我们创建了三个子标签，分别用于显示标题、内容和关闭按钮，这些样式可以在CSS文件中定义。

第二步：弹窗打开和关闭

我们需要编写弹窗的打开和关闭逻辑，这里我们选择将这部分逻辑封装到一个单独的函数中，并添加到jQuery的原型链上，以实现灵活调用。

$.fn.dialog = function(){
  // 打开弹窗逻辑
  this.show();
  // 关闭弹窗逻辑
  this.find('.dialog_close').click(function(){
    $(this).parents('#dialog').hide();
  });
}

以上代码中，我们定义了一个dialog函数，并将它添加到jQuery的原型链上。在函数中，首先获取当前选择器的标签（即弹窗容器），执行show()函数，将其显示出来。同时，我们在关闭按钮上设置了click事件，当点击关闭按钮时，执行$(this).parents('#dialog').hide()，关闭弹窗。

第三步：拖动功能

我们还可以添加拖动功能，使得用户可以通过鼠标拖动弹窗。这里我们需要编写onmousedown和onmousemove事件，分别实现鼠标按下和鼠标移动时的逻辑。

$.fn.dialog = function(){
  // 记录鼠标在标题栏中的位置
  var mouseX = 0;
  var mouseY = 0;
  // 记录弹窗在文档中的位置
  var dialogX = 0;
  var dialogY = 0;
  var isDragging = false;

  // 打开弹窗逻辑
  this.show();
  // 关闭弹窗逻辑
  this.find('.dialog_close').click(function(){
    $(this).parents('#dialog').hide();
  });
  // 拖动弹窗逻辑
  this.find('.dialog_title').mousedown(function(e){
    isDragging = true;
    mouseX = e.pageX;
    mouseY = e.pageY;
    dialogX = parseInt($(this).parent().css('left'));
    dialogY = parseInt($(this).parent().css('top'));
  });

  $(document).mousemove(function(e){
    if(isDragging){
      var x = e.pageX - mouseX;
      var y = e.pageY - mouseY;
      $('#dialog').css({left:dialogX+x, top:dialogY+y});
    }
  });

  $(document).mouseup(function(){
    isDragging = false;
  });
}

以上代码中，我们添加了以下几个变量：

mouseX和mouseY：鼠标在标题栏中的位置
dialogX和dialogY：弹窗在文档中的位置
isDragging：标记当前是否在拖动弹窗

在标题栏中，我们实现了mousedown事件，记录了鼠标在标题栏中的位置（即mouseX和mouseY），以及弹窗在文档中的位置（即dialogX和dialogY）。当鼠标按下时，我们将isDragging标记为true，表示正在拖动弹窗。

接着，我们实现了mousemove事件，在isDragging为true时，计算出鼠标当前位置与初始位置之间的差值，将差值加上弹窗起始位置，即可实现弹窗拖动。

最后，我们实现了mouseup事件，用于取消拖动状态。

示例

这里提供两种示例，一种是使用普通的<a>标签触发弹窗打开，另一种是在页面加载时自动弹出浮动窗口。

方式一：使用`<a>`标签触发弹窗

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="dialog.js"></script>
</head>
<body>
  <a href="javascript:;" id="open_dialog">打开浮动窗口</a>

  <div id="dialog" style="display:none;">
    <div class="dialog_title">弹窗标题</div>
    <div class="dialog_content">弹窗内容</div>
    <div class="dialog_close">X</div>
  </div>

  <script>
    $('#open_dialog').click(function(){
      $('#dialog').dialog();
    });
  </script>
</body>
</html>

以上代码中，我们创建了一个<a>标签，并在click事件中，调用$('#dialog').dialog()函数打开弹窗。

方式二：自动弹出浮动窗口

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="dialog.js"></script>
</head>
<body>
  <div id="dialog" style="display:none;">
    <div class="dialog_title">弹窗标题</div>
    <div class="dialog_content">弹窗内容</div>
    <div class="dialog_close">X</div>
  </div>

  <script>
    $(document).ready(function(){
      $('#dialog').dialog();
    });
  </script>
</body>
</html>

以上代码中，我们在$(document).ready()事件中，调用$('#dialog').dialog()函数打开弹窗。这样，页面加载后即可自动弹出弹窗。