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

2023-10-27

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

在这里插入图片描述

.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后超过父弹出层的部分可以正确显示,但位置不正确。
在这里插入图片描述
问题未解决

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐