登录界面遮罩层的实现

digital_sun

于 2019-08-13 23:23:02 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： css 遮罩层

本文链接：https://blog.youkuaiyun.com/digital_sun/article/details/99488757

本文介绍了如何利用CSS和JavaScript实现登录界面的遮罩层效果。首先，创建一个固定定位并设置透明度的全屏div作为遮罩层。接着，在页面中添加触发显示遮罩层的按钮，通过JavaScript的getElementById方法来切换遮罩层的显示状态。最后，添加一个关闭按钮，同样通过JavaScript控制遮罩层的隐藏。注意遮罩层不会覆盖同样使用fixed定位的元素。

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

实现遮罩层的步骤：

1.我们要先创建一个能够覆盖全体内容的div，把这个div的position设置为fixed(这样布局就不会影响到其他的div)，最好设置opacity，使遮罩层半透明

2.因为遮罩层加载进来display=none,是不显示的，我们需要在正文中加入一个按钮，onclick调用js中的方法，getElementById通过id获取div，将它的display设置为block。这样点我们就能通过点击事件将遮罩层显示

3.我们需要一个关闭遮罩层的按钮。创建一个div，里面放按钮。（注意，这个div要与遮罩层div同级。若放在遮罩层div中，会变成半透明且无法改变）按钮里面放onclick事件，同样通过getElementById获取div，将它的display设置为none。

注：遮罩层不能遮住同为display：fixed的元素

代码如下：

<!DOCTYPE html>
<html>

<head>
  <title>学习</title>
  <link rel="stylesheet" type="text/css" href="">
  <meta charset="utf-8">
  <meta name="description" content=这是一个html页面，这里展示了我们要学习的内容">
  <meta http-equiv="pragma" content="">
  <style type="text/css">
    #advertisem