简单漂亮的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 Demo模态窗口

    下面是关于JavaScript Demo模态窗口的完整攻略: 简介 Demo模态窗口是一种常见的Web开发技术,用于在页面中显示交互式传达信息、获取用户反馈等操作。本文将详细介绍如何使用JavaScript实现Demo模态窗口。 实现方式一:使用HTML和CSS HTML部分 首先在页面中加入一块隐藏的HTML代码块,用于存放模态窗口的结构,例如: <…

    JavaScript 2023年6月10日
    00
  • JS利用cookies设置每隔24小时弹出框

    JS利用cookies设置每隔24小时弹出框的完整攻略包括以下步骤: 1.创建弹出框:需要使用HTML/CSS/JS创建一个弹出框 其中 HTML 和 CSS 用于定义弹出框的外观和布局,而 JavaScript 用于实现动态效果和控制弹出框的显示和隐藏。 示例代码如下: <div id="popup">这是一个弹出框<…

    JavaScript 2023年6月11日
    00
  • JavaScript实现余额数字滚动效果

    下面我将详细讲解如何使用JS实现余额数字滚动效果。 什么是余额数字滚动效果? 余额数字滚动效果是指在页面中展示一个数值,例如用户的账户余额,数字从低到高逐渐滚动显示出来。这种效果可以增加页面的生动性和用户交互性,提升用户体验。 实现余额数字滚动效果的步骤 以下是实现余额数字滚动效果的主要步骤: 获取要展示的数字 将数字转化为每一位数字的数组 创建一个展示数字…

    JavaScript 2023年6月11日
    00
  • js之事件冒泡和事件捕获详细介绍

    下面我将给出关于”js之事件冒泡和事件捕获详细介绍”的完整攻略。 什么是事件冒泡和事件捕获 在JavaScript中,事件处理程序可以直接绑定在DOM元素上。当事件被触发时,事件会从目标元素开始向外传播,这就是事件的冒泡和捕获。 事件冒泡是指事件从子元素传递到父元素,直到传递到最外层的元素(也就是window对象)。例如,当单击一个button元素时,单击事…

    JavaScript 2023年5月28日
    00
  • JavaScript字符串检索字符的方法

    JavaScript中有多种方法可以用于检索字符串中的字符。以下是其中几种常用的方法。 charAt() 方法 charAt() 方法用于检索字符串中指定位置的字符。其语法如下: str.charAt(index) 其中,str 表示要检索的字符串,index 表示要检索的位置。注意,位置是从0开始计数的。 示例1:检索字符串中的第一个字符 var str …

    JavaScript 2023年5月28日
    00
  • Java实战之用Spring开发条形码和验证码

    Java实战之用Spring开发条形码和验证码 为了保证网站的安全性和便捷性,很多网站都会使用验证码来防止机器人恶意攻击,而条形码也是在电子商务中常用的一种表示商品信息的方式。本文将详细介绍如何使用Spring框架开发实用的条形码和验证码功能。 准备工作 首先,为了使用Spring框架,需要引入Spring的相关依赖,如下所示: <dependenci…

    JavaScript 2023年5月28日
    00
  • 一文详解JavaScript闭包典型应用

    一、JavaScript闭包基础概念 闭包指的是函数内部能够访问其外部作用域的一种机制。简单来说,闭包就是一个函数引用了其包含作用域中的变量(即使在该函数外部调用时也能够访问这些变量)。通常,一个函数执行完毕后,其内部变量将会释放,但如果该函数内部存在闭包,则这些变量仍然会被保存。 二、闭包的经典应用 实现函数记忆 函数记忆是一种用来缓存函数结果的技术。它可…

    JavaScript 2023年6月10日
    00
  • JavaScript编码小技巧分享

    JavaScript编码小技巧分享 概述 JavaScript是一门常用的脚本编程语言,用于网页前端开发。面对日益复杂的开发需求,编写高效、稳定、易于维护的JavaScript代码显得尤为重要。本文将分享一些实用的JavaScript编码小技巧,帮助你提高开发效率、提升代码质量。 小技巧一:避免使用全局变量 在JavaScript中,全局变量具有全局作用域,…

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