layui layer弹出层通过offset属性定位弹出层在光标处弹出(event.clientY和event.clientX)失败。

本文主要是介绍layui layer弹出层通过offset属性定位弹出层在光标处弹出(event.clientY和event.clientX)失败。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

将弹出层弹出位置定位到光标处,大小超过父弹出层的部分无法显示

在这里插入图片描述

.js

//页面层-自定义
$("#more").click(function (event) {layer.open({id:"moreMenu",type: 1,title: false,closeBtn: 0,shadeClose: true,shade:0.0001,skin: 'menuBody',resize:false,offset: [event.clientY,event.clientX],// area:['200px','300px'],content: '<style>' +'.menu{' +'font-size:12px;' +'font-family:微软雅黑;}' +'.moreMenu-top{\n' +'    width: 100px;\n' +'    margin-left: 1px;\n' +'    margin-right: 1px;\n' +'    margin-top: 2px;\n' +'    padding: 5px' +'}\n' +'.moreMenu-mid{\n' +'    width: 100px;\n' +'    margin-left: 1px;\n' +'    margin-right: 1px;\n' +'    padding: 5px' +'}\n' +'.moreMenu-bottom{\n' +'    width: 100px;\n' +'    margin-left: 1px;\n' +'    pmargin-right: 1px;\n' +'    margin-bottom: 2px;\n' +'    padding: 5px' +'}\n' +'.menuOver{\n' +'    background: lightgrey; \n' +'}</style>' +'<div class="menu moreMenu-top">回复</div>' +'<div class="menu moreMenu-mid">删除</div>' +'<div class="menu moreMenu-bottom">彻底删除</div>' +'<script>' +'$(".menu").hover(function() {' +'$(this).addClass("menuOver")' +'},function() {' +'$(this).removeClass("menuOver")' +'})' +'</script>',});
})

若采用top.layer.open打开弹出层,则弹出层定位出现问题,无法正确定位光标位置,没有搞明白为什么

采用top.layer.open后超过父弹出层的部分可以正确显示,但位置不正确。
在这里插入图片描述
问题未解决

这篇关于layui layer弹出层通过offset属性定位弹出层在光标处弹出(event.clientY和event.clientX)失败。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/675577

相关文章

Springboot项目启动失败提示找不到dao类的解决

《Springboot项目启动失败提示找不到dao类的解决》SpringBoot启动失败,因ProductServiceImpl未正确注入ProductDao,原因:Dao未注册为Bean,解决:在启... 目录错误描述原因解决方法总结***************************APPLICA编

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom(maven创建的pom工程)2.启动类上加@EnableDubbo3.实

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java进程异常故障定位及排查过程

《Java进程异常故障定位及排查过程》:本文主要介绍Java进程异常故障定位及排查过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、故障发现与初步判断1. 监控系统告警2. 日志初步分析二、核心排查工具与步骤1. 进程状态检查2. CPU 飙升问题3. 内存

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

Qt如何实现文本编辑器光标高亮技术

《Qt如何实现文本编辑器光标高亮技术》这篇文章主要为大家详细介绍了Qt如何实现文本编辑器光标高亮技术,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解下... 目录实现代码函数作用概述代码详解 + 注释使用 QTextEdit 的高亮技术(重点)总结用到的关键技术点应用场景举例示例优化建议

Python打印对象所有属性和值的方法小结

《Python打印对象所有属性和值的方法小结》在Python开发过程中,调试代码时经常需要查看对象的当前状态,也就是对象的所有属性和对应的值,然而,Python并没有像PHP的print_r那样直接提... 目录python中打印对象所有属性和值的方法实现步骤1. 使用vars()和pprint()2. 使

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性,由Chrome125开始提供原生支持需... 目录 css Anchor Positioning:重新定义「锚定定位」的时代来了! 什么是 Anchor Pos