遮罩层的显示、隐藏

遮罩层的显示、隐藏
开发工具和关键技术:Adobe Dreamweaver CC 2017、遮罩层的显示、隐藏
撰写时间:2019年1月31日
今天,和大家分享的技术是遮罩层的显示、隐藏。
下面,我举个例子来说明一下。
第一步,给你想给的类添加遮罩层和固定定位;
截图如下:
遮罩层的显示、隐藏
图中的rgba代表的是遮罩层的颜色和透明度,rgb分别代表red(红色)、green(绿色)、bule(蓝色),当它们的值为最小值:255时,颜色为白色;当它们的值为最大值:0时,颜色为黑色;a代表的是透明度。
第二步,在遮罩层里可以添加你想要的内容,并添加鼠标的点击事件。
截图如下:
遮罩层的显示、隐藏
遮罩层的显示、隐藏
最后一步,在js上声明按钮的id和添加对应的鼠标点击事件;实现遮罩层的显示和隐藏;
截图如下:
遮罩层的显示、隐藏