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

相关文章

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

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

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

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

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

SpringBoot读取ZooKeeper(ZK)属性的方法实现

《SpringBoot读取ZooKeeper(ZK)属性的方法实现》本文主要介绍了SpringBoot读取ZooKeeper(ZK)属性的方法实现,强调使用@ConfigurationProperti... 目录1. 在配置文件中定义 ZK 属性application.propertiesapplicati

Java反射实现多属性去重与分组功能

《Java反射实现多属性去重与分组功能》在Java开发中,​​List是一种非常常用的数据结构,通常我们会遇到这样的问题:如何处理​​List​​​中的相同字段?无论是去重还是分组,合理的操作可以提高... 目录一、开发环境与基础组件准备1.环境配置:2. 代码结构说明:二、基础反射工具:BeanUtils

MySQL 事务的概念及ACID属性和使用详解

《MySQL事务的概念及ACID属性和使用详解》MySQL通过多线程实现存储工作,因此在并发访问场景中,事务确保了数据操作的一致性和可靠性,下面通过本文给大家介绍MySQL事务的概念及ACID属性和... 目录一、什么是事务二、事务的属性及使用2.1 事务的 ACID 属性2.2 为什么存在事务2.3 事务

Spring Cache注解@Cacheable的九个属性详解

《SpringCache注解@Cacheable的九个属性详解》在@Cacheable注解的使用中,共有9个属性供我们来使用,这9个属性分别是:value、cacheNames、key、key... 目录1.value/cacheNames 属性2.key属性3.keyGeneratjavascriptor

Spring Boot 事务详解(事务传播行为、事务属性)

《SpringBoot事务详解(事务传播行为、事务属性)》SpringBoot提供了强大的事务管理功能,通过@Transactional注解可以方便地配置事务的传播行为和属性,本文将详细介绍Spr... 目录Spring Boot 事务详解引言声明式事务管理示例编程式事务管理示例事务传播行为1. REQUI

Pyserial设置缓冲区大小失败的问题解决

《Pyserial设置缓冲区大小失败的问题解决》本文主要介绍了Pyserial设置缓冲区大小失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录问题描述原因分析解决方案问题描述使用set_buffer_size()设置缓冲区大小后,buf

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA