<!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. YII2.0 验证表单

    控制器代码 <?php namespace app\modules\pub\controllers; use Yii; use backend\base\BaseController; use ...

  2. 18、（番外）匿名方法+lambda表达式

    概念了解: 1.什么是匿名委托(匿名方法的简单介绍.为什么要用匿名方法) 2.匿名方法的[拉姆达表达式]方法定义 3.匿名方法的调用(匿名方法的参数传递.使用过程中需要注意什么) 什么是匿名方法? 匿 ...

  3. High Precision Timers in iOS / OS X

    High Precision Timers in iOS / OS X The note will cover the do's and dont's of using high precision ...

  4. 浅谈C#中的接口和抽象类

    C#中接口为"其他方面互不相干"的类型提供公共的服务和特征:C#中class只支持但继承,使用接口却支持多继承,例如:C#中System.String是从System空间中的4个i ...

  5. 由STL所想到的 C++显示调用析构函数

    在STL中的容器中的析构函数中,会经常调用destroy()这个函数 在STL中  destroy()被重载了 这点在这里到不去讨论 这里贴最简单的那个版本 template<class T&g ...

  6. 从数学角度看最大期望(EM)算法 II

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2015/3/13 对于隐变量只有有限个取值(比如$N$个)的情况,我们可以将隐变量表示为${z_j} = [{z_{j ...

  7. url 传参写法

    qianee-web/invite/123 @RequestMapping("/invite/{userId}") public ModelAndView invite(HttpS ...

  8. python数据结构与算法——冒泡排序

    用两种方式实现,非递归和递归 直接上代码: 先是失败的递归方式,涉及到对象引用的问题: # Bad 想一想为啥不行? def bubblesort_rec_bad(A): if len(A)==1: ...

  9. oracle字符函数

    UPPER(char) 小写转大写 LOWER(char) 大写转小写 INITCAP(char) 首字母转换 SUBSTR(char,[m[,n]]) 截取字符串函数 从源字符串char的m开始截取 ...

  10. 在Swift中应用Grand Central Dispatch(上）转载自的goldenfiredo001的博客

    尽管Grand Central Dispatch(GCD)已经存在一段时间了,但并非每个人都知道怎么使用它.这是情有可原的,因为并发很棘手,而且GCD本身基于C的API在 Swift世界中很刺眼. 在 ...