<!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. Python 基礎 - for流程判斷

    今天介紹另一個循環判斷式 for循環,首先,先寫一個很簡單的 for循環的代碼 #!/usr/bin/env python3 # -*- coding:utf-8 -*- for i in range ...

  2. Linux下手动获取当前调用栈

    被问到如何手动获取当前的调用栈,之前碰到过一时没记起来,现在回头整理一下. 其原理是:使用backtrace()从栈中获取当前调用各层函数调用的返回地址,backtrace_symbols()将对应地 ...

  3. 去掉EditPlus自动备份bak文件

    用EditPlus编辑文件是总是自动生成一个.bak文件. 其实想去掉EditPlus的自动备份也简单,方法如下: 打开菜单栏上的:工具->参数设置->文件 去掉“保存时创建备份文件”前的 ...

  4. JavaScript对象属性赋值操作的逻辑

    对象进行属性赋值操作时,其执行逻辑如下所示: 1. 当前对象中是否有该属性?有,进行赋值操作:没有,进行下一步判断. 2. 对象的原型链中是否有该属性?没有,在当前对象上创建该属性,并赋值:有,进行下 ...

  5. HDU 5943 Kingdom of Obsession

    题意:n个人编号为[s+1, s+n],有n个座位编号为[1,n],编号为 i 的人只能坐到编号为它的约数的座位,问每个人是否都有位置坐. 题解:由于质数只能坐到1或者它本身的位置上,所以如果[n+1 ...

  6. Android项目的目录结构

    assets  资产目录,  存放一个文件的 这个文件会被打包到应用程序的apk(安装包 ) bin 编译后的文件目录 gen 自动生成文件的目录 roject.properties 代表编译的版本  ...

  7. CC3000 SPI接口编程介绍

    CC3000 SPI 操作: CC3000的SPI 是基于五根线CLCK,CSn,IRQ,MISO,MOSI:通信模式如下图: CLCK:时钟频率0-26M从主机到从机,提供SPI接口时钟 CSn:低 ...

  8. django1.9.6 使用 DjangoUeditor (python3.5)

    DjangoUeditor https://github.com/zhangfisher/DjangoUeditor 1 DjangoUeditor 安装 pip install DjangoUedi ...

  9. 2017.1.8a版给信息源新增：max_len、max_db字段

    2017.1.8a版程序给信息源增加max_len.max_db字段,分别用于控制:获取条数.数据库保留条数. max_len的说明见此图: max_db的说明见此图: 当max_len和max_db ...

  10. Unity3d 引擎原理详细介绍

    体系结构 为了更好地理解游戏的软件架构和对象模型,它获得更好的外观仅有一名Unity3D的游戏引擎和编辑器是非常有用的,它的主要原则. Unity3D 引擎 Unity3D的是一个屡获殊荣的工具,用于 ...