首先是弹窗元素

<div class="tanchuang move-win1"
       id="tanchuang1">
    <el-button>111</el-button>
  </div>

然后在需要弹窗的地方监听点击事件,可以将这个方法写在页面载入事件中

// 获取弹窗元素
var tanchuang = document.getElementById('tanchuang1');

// 右键点击事件
document.getElementById('lsb-table').addEventListener('contextmenu', function(event) {
    event.preventDefault(); // 阻止默认的右键菜单

    // 调用右键点击事件的方法
    showContextMenu(event);
});

// 显示上下文菜单
function showContextMenu(event) {
    // 设置弹窗的位置
    tanchuang.style.display = 'block';
    tanchuang.style.left = event.pageX + 'px';
    tanchuang.style.top = event.pageY + 'px';
}

// 当点击其他地方时,隐藏弹窗
document.addEventListener('click', function(event) {
    if (event.target !== tanchuang && !tanchuang.contains(event.target)) {
        tanchuang.style.display = 'none'; // 隐藏弹窗
    }
});

效果如图
在这里插入图片描述

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐