<!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>

    <script src="../files/js/jquery-3.3.1.min.js"></script>

    <style>

        .box {

            position: relation;

            display: none;

        }
　　　　　//遮罩层样式

        .modal_cover {

            width: %;

            height: %;

            position: fixed;

            top: ;

            left: ;

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

        }
　　　　　//并排内容样式

        .modal {

            position: absolute;

            width: 823px;

            background: salmon;

            z-index: ;

            height: 400px;

            /* 水平垂直居中 */

            left: %;

            top: %;

            transform: translate(-%, -%);

        }

        .content {

            width: %;

            height: 600px;

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

            overflow: auto;

            overflow-x: hidden;

            cursor: pointer

        }

    </style>

</head>

<body>

    <button class="surprise" onclick="">点击我会有惊喜呦！！！！</button>

    <div class="box">

        <!-- 遮罩层 -->

        <div class="modal_cover"></div>

        <div class="modal">

            <div class="content">提交申诉</div>

        </div>

    </div>

</body>

<script>

    $(document).ready(function () {

        $(".surprise").click(function () {

            $(".box").css("display", "block");

        })

        // 点击遮罩层区域  蒙版层消失

        $(".modal_cover").click(function () {

            $(this).parent(".box").css("display", "none");

        })

    })

</script>

</html>

HTML 弹出遮罩层二（遮罩层和内容标签分开）的更多相关文章

  1. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

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

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

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

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

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

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

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

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

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

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

  7. layui弹出层基础参数

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

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

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

  9. js点击弹出div层

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

随机推荐

  1. Git学习笔记---协作的一般流程

    一般的操作流程 1.pull 王小坤与另一个同事张大炮一起开发一个项目,张大炮昨天修改了数据库读写的api,优化了执行速度,并把read()函数改名成了Read(),下午下班之前把这些代码push到服 ...

  2. CentOS7 系统升级，删除centos7开机界面多余选，升级至最新的内核

    一:升级系统 1.检查系统版本: [root@localhost /]# cat /etc/redhat-release CentOS Linux release (Core) 2.运行yum命令升级 ...

  3. SCU 4438 Censor（Hash）题解

    题意:找出字符串p中的w串删除,反复操作,直到找不到w,输出这个串 思路:哈希处理前缀和,如果值相同就删掉. 代码: #include<iostream> #include<algo ...

  4. 【做题】POJ3469 Dual Core CPU——第一道网络流

    刚学了Dinic就开始做题,然后就崩了. 题意:若干个任务,可以放在两个CPU中任意一个上完成,各有一定代价.其中又有若干对任务,如果它们不在同一个CPU上完成,会产生额外代价.最小化并输出代价. 一 ...

  5. Win32汇编学习(1)：基本概念

    背景知识 Windows 把每一个 Win32 应用程序放到分开的虚拟地址空间中去运行,也就是说每一个应用程序都拥有其相互独立的 4GB 地址空间,当然这倒不是说它们都拥有 4GB 的物理地址空间,而 ...

  6. CF375D Tree and Queries（dsu on tree）

    思路 dsu on tree的板子,可惜人傻把 for(int i=fir[u];i;i=nxt[i]) 打成 for(int i=fir[u];i<=n;i++) 调了两个小时 这题要求维护& ...

  7. (zhuan) Attention in Long Short-Term Memory Recurrent Neural Networks

    Attention in Long Short-Term Memory Recurrent Neural Networks by Jason Brownlee on June 30, 2017 in  ...

  8. Unity3D学习笔记（三十四）：Shader着色器（1）

    一.GPU:图形处理器,Graphics Processing Unit 显卡的处理器就是图形处理器.与CPU类似.   GPU和CPU的区别? 1.CPU主要是为了串行指令设计,GPU则是为了大规模 ...

  9. 【sql server】索引详解

    索引可以理解为一种特殊的目录结构. sql server提供两种索引形式: 聚集索引和非聚集索引. 怎么理解这两种形式. 拿我们常用的字典举例来说, 一个字典好比数据库中的一个表.那么当我们想从字典中 ...

  10. 如何判断一个单向链表是否为回文链表（Palindrome Linked List）

    题目:给定一个单向链表,判断它是不是回文链表(即从前往后读和从后往前读是一样的).原题见下图,还要求了O(n)的时间复杂度O(1)的空间复杂度. 我的思考: 1,一看到这个题目,大脑马上想到的解决方案 ...