• 在弹窗中新建一个遮罩层


    一、mask-div

    在原来页面弹出一个弹窗后,鼠标还是可以点击页面其他地方,所以我要给页面弹出一个遮罩层,把页面所有东西都遮住,不给用户点击除了弹窗之外的东西。

    实现后的效果:


    当我点击“添加”按钮时,会弹出两个层,一个是下面的遮罩层(一个我们看到的黑色半透明的遮住全屏幕的div),另一个就是我们要填写信息的弹窗。

    二、设置遮罩层样式 

    要实现遮住全屏,可以这样来设置属性,兼容FF、chrome

    #mask-div{background-color:black; position:fixed; left:0; top:0;z-index: 100; display:none; 100%; height:100%;opacity:0.6;filter: alpha(opacity=60);-moz-opacity: 0.6;}

    (1)设置为positon:fixed,然后width和height都设置为100%,这样就能遮住整个屏幕。

    (2)mask-div的层比弹窗低。z-index

  • 相关阅读:
    VIM配置
    VSCode配置Import@路径
    Sar
    VIM-Fold折叠
    sysctl
    java8 到 java14新增的特性
    Electron整合VUE
    使用Markfile开发GO程序
    cron 表达式
    java spi
  • 原文地址:https://www.cnblogs.com/wuyinghong/p/4322686.html
Copyright © 2020-2023  润新知