JQuery蒙板层（特效）

最新推荐文章于 2021-07-29 17:12:47 发布

原创最新推荐文章于 2021-07-29 17:12:47 发布 · 735 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用HTML和CSS创建一个蒙板层，通过调整DIV的不透明度实现界面元素的隔离，提升用户体验。点击按钮后，蒙板层显现，阻止用户对底层界面的交互。

蒙板层，无非就是调用一个空白的DIV界面，遮挡窗体，无法对窗体下面的东西控件进行操作。

工具：一个空白的div标签，使得覆盖整个窗体，例如下面的mDiv

CSS属性：css设置不透明度opacity

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="script/jquery-3.3.1.min.js"></script>
    <style>
        #mDiv {
            position: absolute; /*绝对定位*/
            width:1024px;
            height:768px;
            left: 0px;
            top: 0px;
            background-color: black;
            display: none;
            opacity: 0.1; /*设置不透明度，相当于磨砂一样，可以看见下面的窗体，但是无法进行操作*/
        }

        #xDiv {
            position: absolute;
            width: 300px;
            height: 100px;
            border: 1px solid red;
            background-color: #e7e7e7;
            display: none;
        }
    </style>
    <script>
        $(function () {
            $('#btnShow').click(function () {
                $('#mDiv').css('display', 'block');
                $('#xDiv').css('display', 'block');
            });
        });
    </script>
</head>
<body>
    <input type="button"  id="btnShow" value="现身" />
    <div id="mDiv"> </div>
    <div id="xDiv" >好嗨哦，感觉人生已经到达了巅峰，感觉人生已经达到了高潮。</div>
</body>
</html>

效果展示：在点击现身按钮以前，浏览器界面是白色，点击现身以后，窗体变为灰色，这是设置透明度的原因，设置了一个蒙板层，将当前的信息与按钮发生了分离。可以对控件以及窗体进行了隔离。用户体验将会是意向不到了。