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

相关文章

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题

《解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题》在Spring开发中,@Autowired注解常用于实现依赖注入,它可以应用于类的属性、构造器或setter方法上,然... 目录1. 为什么 @Autowired 在属性上被警告?1.1 隐式依赖注入1.2 IDE 的警告:

HTML5中下拉框<select>标签的属性和样式详解

《HTML5中下拉框<select>标签的属性和样式详解》在HTML5中,下拉框(select标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中

MySQL安装时initializing database失败的问题解决

《MySQL安装时initializingdatabase失败的问题解决》本文主要介绍了MySQL安装时initializingdatabase失败的问题解决,文中通过图文介绍的非常详细,对大家的学... 目录问题页面:解决方法:问题页面:解决方法:1.勾选红框中的选项:2.将下图红框中全部改为英

Nginx启动失败:端口80被占用问题的解决方案

《Nginx启动失败:端口80被占用问题的解决方案》在Linux服务器上部署Nginx时,可能会遇到Nginx启动失败的情况,尤其是错误提示bind()to0.0.0.0:80failed,这种问题通... 目录引言问题描述问题分析解决方案1. 检查占用端口 80 的进程使用 netstat 命令使用 ss

pip install jupyterlab失败的原因问题及探索

《pipinstalljupyterlab失败的原因问题及探索》在学习Yolo模型时,尝试安装JupyterLab但遇到错误,错误提示缺少Rust和Cargo编译环境,因为pywinpty包需要它... 目录背景问题解决方案总结背景最近在学习Yolo模型,然后其中要下载jupyter(有点LSVmu像一个

如何解决Pycharm编辑内容时有光标的问题

《如何解决Pycharm编辑内容时有光标的问题》文章介绍了如何在PyCharm中配置VimEmulator插件,包括检查插件是否已安装、下载插件以及安装IdeaVim插件的步骤... 目录Pycharm编辑内容时有光标1.如果Vim Emulator前面有对勾2.www.chinasem.cn如果tools工

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper

JavaScript中的isTrusted属性及其应用场景详解

《JavaScript中的isTrusted属性及其应用场景详解》在现代Web开发中,JavaScript是构建交互式应用的核心语言,随着前端技术的不断发展,开发者需要处理越来越多的复杂场景,例如事件... 目录引言一、问题背景二、isTrusted 属性的来源与作用1. isTrusted 的定义2. 为