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选择器获取iddialog的标签,并设置其默认样式为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(),关闭弹窗。

第三步:拖动功能

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

$.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;
  });
}

以上代码中,我们添加了以下几个变量:

  • mouseXmouseY:鼠标在标题栏中的位置
  • dialogXdialogY:弹窗在文档中的位置
  • isDragging:标记当前是否在拖动弹窗

在标题栏中,我们实现了mousedown事件,记录了鼠标在标题栏中的位置(即mouseXmouseY),以及弹窗在文档中的位置(即dialogXdialogY)。当鼠标按下时,我们将isDragging标记为true,表示正在拖动弹窗。

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

最后,我们实现了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()函数打开弹窗。这样,页面加载后即可自动弹出弹窗。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • margin-top塌陷问题的现象与解决的具体方法

    关于“margin-top塌陷问题”的详细讲解和解决方法如下: 什么是margin-top塌陷问题? 在网页设计中,我们常常使用margin来控制元素之间的间距。但是在某些情况下,上一个元素的margin-top值却会被下一个元素的margin-top值所代替,这样就会造成上一个元素的margin-top值消失,这个现象被称为margin-top塌陷问题。 …

    css 2023年6月10日
    00
  • 原JS实现banner图的常用功能

    下面我将详细讲解原JS实现banner图的常用功能的完整攻略。 1. 常用功能介绍 在实现banner图过程中,以下是一些常用的功能: 1.1 图片轮播 图片轮播是banner图的核心功能,它可以通过设置图片列表和定时器来实现。轮播过程可以采用两种方式:水平轮播和垂直轮播。图片轮播一般会包含以下功能: 自动轮播:按照一定时间间隔自动切换图片 手动切换:用户可…

    css 2023年6月10日
    00
  • CSS3圆角和渐变2种常用功能详解

    CSS3圆角和渐变2种常用功能详解 CSS3圆角 CSS3中新增加了一个非常实用的功能——圆角(border-radius)。这个功能使得开发人员可以轻松地实现圆角效果的按钮和图片等效果。以下是如何使用CSS3圆角的方法: 语法 border-radius: 10px; 上面的例子是给元素的四个角设置了半径为10像素的圆角。如果想要给其中某个角设置圆角,可以…

    css 2023年6月9日
    00
  • css a标签的visied伪类失效原因介绍

    针对“css a标签的visited伪类失效原因介绍”这个问题,我将为您提供完整的攻略。 1. 问题分析 a:visited 伪类选择器用于选择用户已经访问过的链接,可以通过设置其样式来改变链接的外观。但有时我们会发现这个伪类选择器失效了,即所设置的样式并没有被应用到已访问过的链接上。 这些是 a:visited 失效的主要原因: 浏览器的安全策略 其他选择…

    css 2023年6月10日
    00
  • HTML标记语言——引用

    请看下面的攻略。 什么是HTML引用标签 HTML的引用标签用于包含一个引用或者称之为一个摘录,因此它也被称为摘录标签。可以使用 <q> 标签为短引用括起来,也就是说,文本中的一个小片段需要被引用的时候,可以使用这个标签。而如果需要引用的内容比较长,那么就需要使用 <blockquote> 标签包裹。这样就可以在内容前后添加引号和缩进…

    css 2023年6月9日
    00
  • CSS实现悬停过渡动画三部曲

    让我为你详细讲解一下“CSS实现悬停过渡动画三部曲”,这个过程可以分为以下三个步骤: 第一步:制作基础样式 我们需要为元素设置初始样式。这包括元素的大小、颜色、字体等。在基础样式中,我们也需要设置元素的默认状态,以及在悬停状态下要应用的样式。这可以通过以下CSS代码实现: .btn{ display: inline-block; padding: 10px …

    css 2023年6月9日
    00
  • 一款利用纯css3实现的超炫3D表单的实例教程

    一款利用纯CSS3实现的超炫3D表单的实例教程 简介 利用CSS3可以实现很炫酷的效果,本篇教程将介绍如何利用CSS3实现一个超炫3D表单。 教程步骤 1. HTML代码 先看看我们要实现的表单的大体结构: <form> <fieldset> <label>用户名:</label> <input type…

    css 2023年6月10日
    00
  • css注释和html注释用法及应用范围介绍

    CSS注释和HTML注释用法及应用范围介绍 一、CSS注释 CSS注释是在CSS代码中添加注释,以便代码阅读和维护。CSS注释通常用于描述样式的用途、作者、创建/修改日期等信息,或者用于说明样式的作用和用法。 CSS注释的语法如下: /* 注释内容 */ 其中,注释内容以/*开头,以*/结尾,中间可写任何内容。需要注意的是,CSS注释不能嵌套,即注释符号/*…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部