<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

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

    <style>

        *{padding: 0; margin: 0}

        /*遮罩层*/

        .box{

            position: fixed;

            width: 100%;

            height: 100%;

            background: rgba(0,0,0,0.2);

            display: none;

        }

        /*弹出层*/

        .box1{

            width: 500px;

            height: 500px;

            position: fixed;left: 50%; top: 25%;

            background: red;

            margin-left: -250px;

            border: 1px solid #000000;

        }

        .box2{

            width: 500px;

            height: 500px;

            position: fixed;left: 50%; top: 25%;

            background: green;

            margin-left: -250px;

            border: 1px solid #000000;

        }

    </style>

    <script>

    </script>

</head>

<body>

    <div class="box" id="b1">

        <div class="box1">

            <a href="javascript:;" onclick="jQuery('#b1').hide()" class="close">关闭</a>

        </div>

    </div>

    <div class="box" id="b2">

        <div class="box2">

            <a href="javascript:;" onclick="jQuery('#b2').hide()" class="close">关闭</a>

        </div>

    </div>

    <a href="javascript:;" onclick="jQuery('#b1').show()" class="show">显示</a>

    <a href="javascript:;" onclick="jQuery('#b2').show()" class="show">显示</a>

    312313232323

</body>

</html>

html弹出窗并用遮罩层的实例的更多相关文章

  1. 弹出框、遮罩层demo

    仿alert.confirm的弹出框. 弹出后,用遮罩层将背景虚化. 代码如下: <html> <meta http-equiv="Content-Type" c ...

  2. 微信小程序弹出和隐藏遮罩层动画以及五星评分

    参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article/ ...

  3. element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面

     造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...

  4. element-ui框架的el-dialog弹出框被遮罩层挡住了

    解决办法 在el-dialog标签里添加 :modal-append-to-body='false'

  5. element ui 弹出组件的遮罩层在弹出层的上面的解决方法

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...

  6. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  7. bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX

    bootstrap-data-target触发模态弹出窗元素的data使用 时间:2017-05-27 14:22:34      阅读:4479      评论:0      收藏:0      [ ...

  8. Bootstrap模态弹出窗

    Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...

  9. jquery Mobile弹出窗

    先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" da ...

随机推荐

  1. ubuntu14.04 键盘错位小问题

    分享一个ubuntu14.04里的小问题,不知道有没有人跟我一样悲催 问题: 键盘错位了,@和"两个符合正好颠倒,~#这几个也错乱了,~符号跑到了|上,#跑到了shift+|上,这个问题在敲 ...

  2. swiper的使用

    最近要用html5制作可以一屏一屏向上滑动的页面,发现大家使用swiper插件的较多,所以试了试,发现做出来的效果还不错,喜欢的朋友可以参考一下自己动手做啦. 1.首先我们要引入4个文件: <h ...

  3. RBL开发笔记三

    2014-08-26 20:06:24 今天就是在开发这个EPOLL来处理网络事件 封装较为健壮的EPOLL模型来处理基本的网络IO 1) 超时这个主题先没有弄 在开发EPOLL包括select/po ...

  4. 数据库基础知识（1）－－数据库php连接

    关系数据库的常用基本术语  数据data 数据库database 数据库管理系统dbms 表(数据表)table 字段field,列column 行row,记录record 数据库操作的基本模式(流程 ...

  5. 多媒体音频（audio）

    随着计算机技术的发展,特别是海量存储设备和大容量内存在PC机上的实现,对音频媒体进行数字化处理便成为可能.数字化处理的核心是对音频信息的采样,通过对采集到的样本进行加工,达成各种效果,这是音频媒体数字 ...

  6. CommandExtra.lua --游戏命令扩展

    --[[作者信息: Command Extra (游戏命令扩展) 作者QQ:247321453 作者Email:247321453@qq.com 修改日期:2014-3-12 功能:添加额外的命令.G ...

  7. （转）几种范数的解释 l0-Norm, l1-Norm, l2-Norm, … , l-infinity Norm

    几种范数的解释 l0-Norm, l1-Norm, l2-Norm, - , l-infinity Norm from Rorasa's blog l0-Norm, l1-Norm, l2-Norm, ...

  8. MySQL性能优化总结（转）https://yq.aliyun.com/articles/24249

    摘要: 一.MySQL的主要适用场景 1.Web网站系统 2.日志记录系统 3.数据仓库系统 4.嵌入式系统 二.MySQL架构图:   三.MySQL存储引擎概述 1)MyISAM存储引擎 MyIS ...

  9. JAVA自定义事件监听完整例子---sunfruit[转]

    http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece763105392230e54f733628a854d2c90c05f9313071601 ...

  10. [Spring MVC] - SpringMVC的各种参数绑定方式

    SpringMVC的各种参数绑定方式 1. 基本数据类型(以int为例,其他类似):Controller代码: @RequestMapping("saysth.do") publi ...