登录界面遮罩层的实现

实现遮罩层的步骤：

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的元素

代码如下：

  
  
  
  
  
  




  

  
关闭登录




  
登录


   
   
  
  
  





  
正文