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日

相关文章

  • Html/CSS前端实现文字边框阴影效果

    下面是“Html/CSS前端实现文字边框阴影效果”的完整攻略。 1. 前言 实现文字边框阴影效果是一种常见的前端设计技巧。通常情况下,我们可以使用CSS的box-shadow和border属性来实现这一效果。在本文中,我们将介绍如何使用HTML和CSS实现文字边框阴影效果。 2. 实现步骤 2.1 创建HTML文件 为了实现此效果,我们首先需要创建一个HTM…

    css 2023年6月9日
    00
  • CSS实现图片等比例缩小不变形的实例代码

    CSS实现图片等比例缩小不变形,可以通过设置img标签的max-width和max-height属性,来限制其最大的宽度和高度,同时自适应缩放。 以下是实现图片等比例缩小不变形的示例代码: img { max-width: 100%; height: auto; } 这段代码设置了img标签的最大宽度为100%,高度自动适应,从而实现图片等比例缩小不变形。这…

    css 2023年6月10日
    00
  • 全面解析多种Bootstrap图片轮播效果

    完整攻略:全面解析多种Bootstrap图片轮播效果 介绍 Bootstrap是一个流行的前端框架,它提供了许多有用的特性,包括灵活的响应式网格系统、强大的样式组件和易于使用的插件等等。其中一个重要的插件就是图片轮播组件,这个组件可以用来创建各种各样的漂亮的轮播效果,这篇文章将详细讲解多种Bootstrap图片轮播效果的实现。 准备工作 在开始编写Boots…

    css 2023年6月10日
    00
  • AJAX开发者的最新工具和技术

    AJAX开发者的最新工具和技术 概述 AJAX是一种常用的Web开发技术,而当下,在AJAX开发领域也有了很多新的工具和技术,这些工具和技术的应用可以提高我们的工作效率和代码质量。本篇文章就为大家介绍一些最新的AJAX开发者工具和技术,以帮助大家更好地进行AJAX开发。 AJAX开发者的最新工具和技术 1. AjaXplorer AjaXplorer是一个基…

    css 2023年6月9日
    00
  • sublime text2 使用技巧心得小结

    Sublime Text2 使用技巧心得小结 Sublime Text2 是一款功能强大且可定制程度极高的文本编辑器,它可以根据不同的需求进行个性化设置,提高工作效率。以下是一些 Sublime Text2 使用技巧小结。 1.快捷键的使用 Sublime Text2 中有许多强大的快捷键,熟练掌握这些快捷键能够在编写代码时提高效率。以下是一些比较实用的快捷…

    css 2023年6月9日
    00
  • vue+element-ui+sortable.js实现表格拖拽功能

    下面是“vue+element-ui+sortable.js实现表格拖拽功能”的完整攻略: 需要使用的框架或插件 vue.js element-ui sortable.js 实现步骤 1. 安装依赖 npm install vue-element-ui sortablejs –save 2. 引入依赖 import Vue from ‘vue’ impor…

    css 2023年6月10日
    00
  • ASP.NET 动态写入服务器端控件

    ASP.NET 是一种基于 Web 的应用程序开发技术,它提供了一种在服务器端创建和维护 Web 应用程序的有效方式。在 Web 应用程序中,服务器端控件是一个非常重要的组成部分,它可以使开发人员能够在页面上动态地创建和修改控件,以便满足各种需求。本文将详细讲解 ASP.NET 中动态写入服务器端控件的攻略,包括创建控件、添加属性、添加事件和删除控件等。 创…

    css 2023年6月9日
    00
  • css 盒模型 文档流 几种清除浮动的方法实例详解

    CSS盒模型 CSS盒模型指的是用于设计和排版网页元素的基本框架,每个元素都是一个矩形盒子,其由四部分组成:内容(content)、填充(padding)、边框(border)、外边距(margin)。 其中,content + padding + border 就是元素的内部空间,而 padding + border + margin 则是元素的尺寸大小。…

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