简单漂亮的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.pageXe.pageY,而其他浏览器使用 e.clientXe.clientY

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

至此,一个简单漂亮的 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');
  });
});

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器 - Python技术站

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

相关文章

  • JavaScript 三种创建对象的方法

    我来详细讲解 JavaScript 三种创建对象的方法。 1. 工厂函数创建对象 通过工厂函数可以返回一个对象。我们可以在函数内部定义一个对象,然后向这个对象添加各种属性和方法,最后完整的返回这个对象。这种方法的优点,可以根据不同的参数,返回多个相似的对象;缺点是不能识别每个具有同样属性和方法的对象类型。 以下是一个例子: function createPe…

    JavaScript 2023年5月27日
    00
  • 简单聊聊Js中的常见错误类型

    简单聊聊Js中的常见错误类型 在Js编程中,我们不可避免地会遇到各种类型的错误。了解这些错误类型及其产生的原因,可以帮助我们更快速地定位错误并解决问题。下面就让我们来简单聊聊Js中的常见错误类型。 1. 引用错误(ReferenceError) 引用错误通常发生在引用未定义的变量或函数时。例如: console.log(a); // Uncaught Ref…

    JavaScript 2023年6月1日
    00
  • JavaScript语法 JSON序列化之stringify实例详解

    JavaScript语法 JSON序列化之stringify实例详解 简介 JSON(JavaScript Object Notation)是一种轻量级数据交换格式,具有数据传输简单、易于阅读和编写的特点。在JavaScript中,我们可以通过JSON对象提供的serialize(序列化)和deserialize(反序列化)函数,轻松对JSON数据进行操作,…

    JavaScript 2023年5月27日
    00
  • 原生JS实现数码表特效

    原生 JS 实现数码表特效攻略 概述 该攻略是使用原生 JS 实现数码表特效的完整教程。该特效是指数字从 0 变化到目标数字,即数码表翻滚特效。 实现步骤 首先,我们需要在 HTML 中创建一个数码表的结构,包括外层容器和数字容器。HTML 结构如下: <div class="counter"> <div class=&…

    JavaScript 2023年6月11日
    00
  • 一个前端大佬的十年回顾 | 漫画前端的前世今生

    作者:京东科技 胡骏 引言 岁月如梭,十载流年 前端技术,蓬勃向前 HTML,CSS,JavaScript 演绎出璀璨夺目的技术画卷 回到十年前,前端技术就像一名戴着厚重眼镜的书呆子,总是小心翼翼,被各种各样的浏览器兼容性问题欺负(就像在小学被欺负一样)。 但随着时间的推移,这个书呆子开始锻炼,变得越来越强壮,终于能够对抗那些讨厌的兼容性问题 进入中学时期,…

    JavaScript 2023年4月17日
    00
  • JS定时器不可靠的原因及解决方案

    JS定时器不可靠的原因及解决方案 什么是JS定时器? JS中有两种类型的定时器: setTimeout setInterval 这两个函数都是用来定时执行某些代码的。setTimeout函数会在指定的时间后执行一次性的操作,而setInterval会每隔指定时间执行一次操作。 JS定时器的不可靠性 JS定时器不可靠的原因是因为定时器的执行是基于事件循环机制的…

    JavaScript 2023年5月28日
    00
  • JavaScript中Function函数与Object对象的关系

    在JavaScript中,函数和对象是密切相关的。每个函数都是一个对象,并且可以像对象一样使用和传递。在此过程中,函数在对象中的重要性很大。下面将详细讲解Function函数和Object对象之间的关系。 Function与Object 每一个函数都是一个Function类型的对象,因此具有Function所继承的方法和属性。函数的定义可以采用最简单的字面量…

    JavaScript 2023年5月27日
    00
  • Discuz .net版本中的短消息系统

    Discuz .net是一款知名的论坛程序,其短消息系统是其重要的功能之一。本文将详细讲解Discuz .net版本中的短消息系统,包括如何创建、管理和使用短消息系统。 创建和启用短消息系统 在Discuz .net中,默认情况下是已经启用了短消息系统的,而且用户可以在论坛的任何页面中通过左上角的“短消息”链接进入短消息系统。如果管理员需要修改短消息系统的设…

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