<!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. cocos2dx 3.0 之 lua 创建类

    利用3.0里面封装好的模板类来写,不罗嗦,直接上例子(消除星星小游戏中 星星类) require "extern" StarSprite = class("StarSpr ...

  2. tensorflow3

    参考文献:tensorflow_manual_cn.pdf 一.tensorflow和caffe对应: graph-->.prototxt定义的网络结构 session-->solver( ...

  3. 《C与指针》第四章练习

    本章问题 1.Is the following statement legal?If so,what does it do? (下面的语句是否合法,如果合法,它做了什么) 3 * x * x - 4 ...

  4. MyBatis架构（转）

    本文来自http://www.bubuko.com/infodetail-549184.html 如果不太熟悉MyBatis使用的请先参见MyBatis官方文档,这对理解其架构设计和源码分析有很大好处 ...

  5. android视频播放器开发

    http://blog.csdn.net/u010181592/article/details/49301703 http://blog.csdn.net/qq_33291295/article/de ...

  6. 配置recovery_min_apply_delay后重启standby节点报错：psql: FATAL: the database system is starting up

    环境: pg版本:PostgreSQL 9.4.4 on x86_64 系统版本:CentOS release 6.6 linux内核版本:2.6.32-504.8.1.el6.x86_64 今天测试 ...

  7. php读取sql2000的image字段，被截断的问题

    php 存取sql server中类型的照片信息! <?php header("Content-Type:text/html;charset=gb2312"); $url=& ...

  8. 【C】 04 - 表达式和语句

    程序的生命力体现在它千变万化的行为,而再复杂的系统都是由最基本的语句组成的.C语句形式简单自由,但功能强大.从规范的角度学习C语法,一切显得简单而透彻,无需困扰于各种奇怪的语法. 1. 表达式(exp ...

  9. linux keepalived+LVS 实现mysql 从库负载均衡

    前情提要: 参考链接: http://www.osyunwei.com/archives/7464.html ps:以上为本次操作的主要参考资料,非常感谢此文作者的贡献,我的随笔的主要目的是 说明在使 ...

  10. <<人性的弱点>>读书笔记

    书名的英文名其实是<< How to win friends and influence people & how to stop worrying and start livin ...