<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .modal_cover{

            display: none;

            width: 100%;

            height: 100%;

            position: fixed;

            top: 0;

            left: 0;

            background-color: rgba(0, 0, 0, .6);

        }

        .modal{

            position: absolute;

            width: 823px;

            background: white;

            z-index: 99;

            height: 80px;

            /* 水平垂直居中 */

            left: 50%;

            top: 50%;

            transform: translate(-50%,-50%);

            /* 超出高度右侧出现垂直滚动条 */

            overflow:auto;

            overflow-x:hidden;

        }

        .button{

            margin: 40px;

        }

    </style>

</head>

<body>

    <div class="modal_cover" style="display:block">

        <div class="modal">

            <button class="button">提交申诉</button>

        </div>

    </div>

</body>

</html>

HTML 弹出遮罩层一（遮罩层和内容标签嵌套）的更多相关文章

  1. iOS 仿看了吗应用、指南针测网速等常用工具、自定义弹出视图框架、图片裁剪、内容扩展等源码

    iOS精选源码 扩展内容的cell - folding-cell 一个近乎完整的可识别中国身份证信息的Demo 可自动快速... JPImageresizerView 仿微信的图片裁剪 带年月和至今以 ...

  2. 【转】弹出可拖动的DIV层提示窗口

    来源:www.divcss5.com <html> <head> <meta http-equiv="Content-Type" content=&q ...

  3. jquery实现弹出即消失的提示层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. layer弹出层不居中解决方案，仅显示遮罩，没有弹窗

    问题:项目中layer询问层的弹窗仅显示遮罩层,并不显示弹窗…… 原因:图片太多将layer弹窗挤出屏幕下方,看不见了…… 解决方案:让layer的弹出层居中显示 一.问题描述 用layer做操作结果 ...

  5. div非弹出框半透明遮罩实现全屏幕遮盖css实现

    IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...

  6. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. layer弹出层不居中解决方案（转）

    @感谢参考文章 原文内容: 一.问题描述 用layer做操作结果提示时,发现如果页面超出屏幕的高度时,弹出的提示不是屏幕居中,而是在页面高度的中间,如果一个页面的高度比较大,就看不到提示了. 还有一种 ...

  8. layui弹出层基础参数

    一.type-层类型 类型:Number  默认为0(信息框); 1(页面层),可以在页面添加HTML内容 2(iframe层) 3(加载层)加载时显示的弹出框 4(tips层) 需要绑定ID就不展示 ...

  9. 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

随机推荐

  1. Markdon 作图语法 CSDN

    插入甘特图 gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section 现有任务 已 ...

  2. NodeJs中npm使用

    什么是 NPM npm 之于 Node ,就像 pip 之于 Python , gem 之于 Ruby , pear 之于 PHP . npm 是 Node 官方提供的包管理工具,他已经成了 Node ...

  3. POJ 1904 King's Quest（强连通图）题解

    题意:n个王子有自己喜欢的ki个公主,有n个公主,每个王子只能娶一个自己喜欢的公主且不能绿别的王子.现在给你一种王子娶公主的方案,并且保证这种方案是正确的.请你给出,每个王子能娶哪些公主,要求娶这些公 ...

  4. Connections in Galaxy War (逆向并查集)题解

    Connections in Galaxy War In order to strengthen the defense ability, many stars in galaxy allied to ...

  5. 【做题】CF388D. Fox and Perfect Sets——线性基&数位dp

    原文链接https://www.cnblogs.com/cly-none/p/9711279.html 题意:求有多少个非空集合\(S \subset N\)满足,\(\forall a,b \in ...

  6. office完全卸载

    第一步:先暂停office服务,再通过 控制面板--卸载程序  --卸载office应用 第二步:通过office_move(自己命名的工具)软件卸载  工具分享:https://pan.baidu. ...

  7. JOISC 2014 邮戳拉力赛（基础DP）

    题意 https://loj.ac/problem/2878 思路 真的神仙题,想到就很好写,想不到就写不出来. 肯定只能一个一个邮戳按顺序分析.首先,将取一枚邮戳的路径分为四种: 上行 \(\rig ...

  8. 剥开比原看代码11：比原是如何通过接口/create-account创建帐户的

    作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchai ...

  9. spring boot 当参数传入开头多个0时，报错：JSON parse error: Invalid numeric value: Leading zeroes not allowed

    原因是: Jackson解析json配置的问题 在配置文件中设置下: spring.jackson.parser.allow-numeric-leading-zeros=true

  10. ubuntu 安装pip3 遇到Ignoring ensurepip failure: pip 8.1.1 requires SSL/TLS错误

    3.5版本之后的会自动安装pip,所以我们直接从官网下载3.5.2,下载地址:https://www.python.org/ftp/python/ 下载以后,可以用命令解压,也可以右键进行解压, ta ...