原生js实现点击位置出现弹出框

最新推荐文章于 2023-03-30 11:52:49 发布
最新推荐文章于 2023-03-30 11:52:49 发布
阅读量4k 收藏 2
点赞数
分类专栏： css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/landiyaaa/article/details/96842678
版权
js 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

文章重点在于位置获取

 

获取事件点击位置相对client的偏移：

event.clientX / event.clientY

 

父元素相对client的位置：

parentDom.getClientRects()[0].left / parentDom.getClientRects()[0].top

 

相减得到点击位置相对父元素的偏移，设置为弹出框位置

popupDom.style.setProperty('top', top + 'px')

popupDom.style.setProperty('left', left + 'px')

landiyaaa
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js点击弹出多个城市选择框特效代码
03-20
原生js点击弹出多个城市选择框代码是一款仿51job的鼠标点击弹出城市选择框特效代码。
原生js实现弹出层效果
11-27
知识要点 1.遮罩层的宽度和高度是js获取页面的宽高（页面内容） //获取遮罩层(内容)的高度和宽度 var sHeight=document.documentElement.scrollHeight; var sWidth=document.documentElement.scrollWidth; 2.登录框设置静止定位fixed 3.登录框居中显示公式：(可视区域宽高-登录框宽高)/2 //获取login的宽度和高度并设置偏移值 var dHeight=oLogin.offsetHeight; var dWidth=oLogin.offsetWidth; oLogin.sty
[转]artDialog说明文档
weixin_34049948的博客
11-07 280
artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口l自适应内容artDialog的特殊UI框架能够适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。l完善的接口它的接口完善，可以轻易与外部程序配合使用。如异步写入消...
Vue3.0移动端自定义弹框组件|vue3弹出层V3Popup
码农ICoding
12-30 6970
Vue3-Popup 基于vue3构建的手机端自定义弹层组件。 一款集合了msg、alert、dialog、modal、actionSheet、toast等多种效果的Vue3自定义弹层组件。支持上下左右弹出、圆角、自定义弹层样式、多按钮及长按/右键功能。 引入v3popup // 在main.js中全局引入 import { createApp } from 'vue' import App from './App.vue' // 引入弹窗组件v3popup import V3Popup
js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
weixin_60886885的博客
03-30 2622
js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
JS按钮点击事件实现弹窗(popup)
热门推荐
zhansan的博客
02-10 2万+
click.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>click</title> <script> function buttonClick(){ window.confirm("你点击了按钮哦"); } </script&g
高德地图实现地图打点，点击后展示小弹框
weixin_筱玉的博客
04-20 2372
创建高德地图 高德地图打点 高德地图展示小弹框
js：获取鼠标点击位置，弹出提示框
彭世瑜的博客
06-19 1817
/ 监听鼠标点击事件。
js准确获取弹窗显示的位置
weixin_43173924的博客
07-31 1194
let objTop = getOffsetTop(document.getElementById("work-area")); //对象x位置 let objLeft = getOffsetLeft(document.getElementById("work-area")); //对象y位置 let mouseX = e.clientX + document.body.scrollLeft; //鼠标x位置 let mouseY = e...
动态赋值弹窗位置
程序猿从放弃到正在入门中...
09-04 667
当我们点击一个按钮出发蒙层弹窗、弹窗时，想要根据你的浏览器页面控制你的弹窗位置时：    1.首先获取页面大小高宽： var X = $(document).height(); var Y = $(document).width();     2.根据你想将弹窗位置放在哪控制弹窗top  left(以弹窗居中为例) var XX= ($(document).height()/2)-300
封装的原生javascript弹出层代码
10-28
最近抽空余的时间写了个弹出层的插件，功能不算强大，当练手，以下为示例代码。
原生js实现弹出层登录拖拽功能
11-26
留言墙、弹出框等一些常见地方都有拖拽功能，方便用户体验嘛。 实现拖拽功能 ，三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight)，窗口坐标位置(clientX ,...
原生js点击弹出多个城市选择框代码.zip
11-26
原生js点击弹出多个城市选择框代码.zip
怎么避免 Promise.all 其中一个 reject 让所有都取不到值
landiyaaa的博客
02-04 1856
大家都知道 Promise.all 传入的 promise array 里面，只要有其中一个 promise reject 了， 即使它前面的 promise 正常 fulfilled，整个 promise.all 也会直接走到 catch，并且只会 catch 第一个 reject 的返回值。 那如何让一串promise 用 Promise.all 实现并行不阻塞地调用，同时每个的reject 和 fulfilled 状态不互相影响呢？ 答案是将这串 promise，每个都用一个新 pro...
iview 如何跨组件控制和同步 Modal 的显示隐藏
landiyaaa的博客
01-11 1084
开发中经常遇到的情况，假如页面需要弹出一个模态框，这个框里的内容也比较多，那么很自然地会考虑把模态框及其中的内容抽成单个组件，再由页面去引用并控制它的显示隐藏。 那么，在中间多出一层封装的情况下，如何同步控制模态框的显示隐藏状态呢？ 外层页面组件 <PriceInfodModal v-model="modalShow" /> data(){ return { modalShow: false // 控制且同步模态框显示隐藏的变量 } } ..
vue自定义组件实现sync
landiyaaa的博客
08-22 653
// template <Modal :value="modalVisible" title="Common Modal dialog box title" @on-visible-change="handleVisibleChange"> <p>Content of dialog</p> ...
使用 js 原生 API IntersectionObserver实现内容触底加载
landiyaaa的博客
09-21 561
使用IntersectionObserver，在react hook 框架下实现下拉列表的无限滚动加载。
彻底搞懂JS中的的隐式类型转换
landiyaaa的博客
08-02 145
看到一篇好文（https://juejin.im/post/5d43bcb36fb9a06b2f5f920f），评论区还有高手打架，旁观者收益不少，因此总结一发。 如果== 两侧是不同类型的值，则会引发隐式类型转换。那么转换的规则是什么？什么时候是true或false呢？ 记住下面几条转换规则，妈妈再也不担心我懵逼 规则一：若字符串和数字进行比较，那么字符串转数字。 '0'...
jquery原生 实现可拖拽放大缩小的弹出框
最新发布
12-08
接着，为弹出框的放大缩小按钮添加点击事件，通过改变弹出框的宽高和位置实现放大缩小效果。具体实现步骤如下： 1. 引入jQuery库： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"> ``` 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值