专栏首页授客的专栏CSS 解决z-index上层元素遮挡下层元素点击事件问题

CSS 解决z-index上层元素遮挡下层元素点击事件问题

解决z-index上层元素遮挡下层元素点击事件问题

开发环境

Win 10

element-ui "2.8.2"

Vue 2.9.6

需求描述

如下,有以下界面,其中右侧边时一个ElementUI Dialog模态对话框,希望在对话框上执行点击操作时,不会点击到被对话框遮挡的页面的按钮,同时,也希望可以点击对话框区域外的其它页面元素

html元素结构如下

解决方案

为被遮挡元素上层使用z-index属性的元素添加以下样式:

pointer-events: none;

这样点击事件就能穿透上层元素,可点击到被遮挡元素,但是此时,上层元素无法响应点击事件

然后为被遮挡元素添加以下样式,让上层元素可以响应点击事件(仅让被遮挡元素自身可以响应点击事件):

pointer-events: auto;

代码实现

<template>
    <!-- 用例详情组件 -->
    <div class="case-dialog-div">
        <el-dialog
            ref="caseDialog"
            :title="caseDialogTitle"
            :visible="caseDialogVisible"
            :fullscreen="fullscreen"
            :modal="false"
            :close-on-click-modal="false"
            :before-close="beforeClose"
            custom-class="case-dialog-class"
            @close="onCloseDialog"
        >
            ...略
        </el-dialog>
    </div>
</template>
<style lang="scss">
// 修改dialog body样式//该样式不能放置.case-dialog-div下,否则 全屏 功能不起作用
.case-dialog-class {
    position: fixed;
    pointer-events: auto; // dialog本身区域不让“穿透点击”
    display: block;
    height: 100%;
    width: 50%; // width: 959px;
    right: 0px;
    margin-top: 0px !important;
    padding: 10px !important;
    overflow: auto;
}
.case-dialog-div {
    .el-dialog__wrapper {
        pointer-events: none; // 可点击dialog区域外的html元素
    }
    ...略
}
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Loadrunner 脚本录制-通过代理录制脚本

    点击 Start Record -> 点击Option -> 找到 Network-> Port Mapping -> 点击New Entry

    授客
  • Jenkins 开启用户注册机制及用户权限设置

    授客
  • loadrunner 技巧-模拟Run Logic中的随机Action运行

    可以这样做,Run-time Settings,删除Action7,然后在其它Action比如Action6中调用Action7(),之所以这样做是因为不在这...

    授客
  • Python面向对象程序设计中属性的作用与用法

    公开的数据成员可以在外部随意访问和修改,很难保证用户进行修改时提供新数据的合法性,数据很容易被破坏,并且也不符合类的封装性要求。解决这一问题的常用方法是定义私有...

    Python小屋屋主
  • 虚拟机中CentOS6.4系统详细安装步骤

    版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/...

    魏晓蕾
  • 大神说的一句话说清楚一个概念

    把一个项目拆成几个部分,然后分别交给不同的人或部门去完成,部门与部门之间互相团结协作共同完成这个大项目。

    py3study
  • 利用BeautifulSoup和python处理xml

    SUMO的软件有些地方真是不好。很多SUMO中要用到的xml文件之前都是手工完成的。今天用BeautifulSoup模块写了一个代码,解决了最麻烦的排序问题。

    钱塘小甲子
  • GPU加速02:超详细Python Cuda零基础入门教程,没有显卡也能学!

    Python是当前最流行的编程语言,被广泛应用在深度学习、金融建模、科学和工程计算上。作为一门解释型语言,它运行速度慢也常常被用户诟病。著名Python发行商A...

    PP鲁
  • 下一代企业无线技术前瞻——CBRS

    无线频谱的短缺一直是世界各国的难题,其珍贵性就像矿石中的钻石。作为全球技术的领导者,美国在这方面肯定会有所行动。经过多年努力,美国联邦通信委员会(FCC)终于展...

    SDNLAB
  • 如何给Linux虚拟机连上WiFi详解

    在生活中,网络无处不在,我们可以通过网络玩游戏、看电视剧和刷微博等,我们的手机和电脑没有了网络可能就变成了一个什么都不能干的物品。由于Linux系统的高安全性,...

    砸漏

扫码关注云+社区

领取腾讯云代金券