css 给div添加遮罩层并且遮挡住下面元素点击事件

本文链接：https://blog.youkuaiyun.com/qq_35479013/article/details/103610447

本文介绍了一种使用HTML和CSS创建透明遮罩层的方法，并通过JavaScript控制其显示和隐藏。遮罩层在网页设计中用于暂时禁用背景内容的交互，常用于弹窗、加载提示等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<title>遮罩层</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,IE=IE8,chrome=1">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="${ctxPath}/static/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="${ctxPath}/static/layuiadmin/style/admin.css" media="all">
<head>
    <title>透明遮罩层</title>
    <script src="js/jquery-2.1.0.js"></script>
    <script language="javascript" type="text/javascript">
        function showCSS() {
             $("#ZZ").addClass("zhezh");
			setTimeout(function(){
			$("#ZZ").attr("class","");
			},5000);
        }
    </script>
    <style type="text/css">
        .zhezh{
            position: absolute;
           /* top: 0%;
            left: 0%;
            right: 0;
            bottom: 0%;*/
            /*width: 100%;
            height: 100%;*/
            background-color: black;
            z-index: 99999;
            /*-moz-opacity: 0.1;*/
            opacity: 0.1;
            /*filter: alpha(opacity=10);*/
            pointer-events: none;
        }
        body
        {
            padding-top: 100px;
        }
    </style>
</head>
<body>

<div id="ZZ">
	<input id="Zhow" type="button" value="显示遮罩"  onclick="showCSS();"/>
	<input type="button" value="点击事件1" onclick="alert(1)">
	<input type="button" value="点击事件2" onclick="alert(2)">
	<input type="button" value="点击事件3" onclick="alert(3)">
</div>
</body>
</html>