zoukankan      html  css  js  c++  java
  • 点击后画面弹框背景变灰阴影层

      实现页面功能的时候经常会遇到一个小功能需求:点击画面一个按钮,画面弹出信息页面,同时背景变暗(背景变暗其实是有个灰色半透明的全屏div遮住了原来的页面)且不可操作,信息页面操作关闭后恢复正常。

      先简要理一下(shuo)(ren)(hua)

    • 点击事件之后要呈现半透明灰色背景挡住原页面
    • 灰色背景之上弹出对话框(或是信息页面)
    • 对话框关闭按下之后,对话框消失
    • 灰色背景消失 

      html、css方面:

    1. 信息页面得是绝对布局保证弹出位置固定(如果需要绝对居中则增加样式:top:50%;left:50%;margin-top:信息页面高度的一半;margin-left:信息页面宽度的一半);
    2. z-Index属性原页面、阴影层、信息页面依次递增(最大在最上面);
    3. display初始为none;
    4. 背景层div高、宽为100%,颜色、透明度酌情赋值;

      js:

      open(原页面按钮):

        document.getElementById('弹框id').style.display = "block";

        document.getElementById('背景id').style.display = "block";

      close(弹框关闭按钮):

        document.getElementById('弹框id').style.display = "none";

        document.getElementById('背景id').style.display = "none";

      

  • 相关阅读:
    一百多套开发视频教程的下载地址
    魅族MX3问题集锦
    Entity Framework 5问题集锦
    【PHP Manager for IIS】让IIS支持PHP
    MySQL安装
    phpMyAdmin安装
    犯了一个愚蠢的序列化错误
    最佳策略
    .net非托管资源
    .net内存何时回收?
  • 原文地址:https://www.cnblogs.com/codingHeart/p/6636169.html
Copyright © 2011-2022 走看看