<!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. 在网页中插入MSN，Skype，QQ的方法

    MSN源码: <a href="msnim:chat?contact=come400@hotmail.com" target="blank">可以适 ...

  2. Python 手写数字识别-knn算法应用

    在上一篇博文中,我们对KNN算法思想及流程有了初步的了解,KNN是采用测量不同特征值之间的距离方法进行分类,也就是说对于每个样本数据,需要和训练集中的所有数据进行欧氏距离计算.这里简述KNN算法的特点 ...

  3. Erlang 103 Erlang分布式编程

    Outline 笔记系列 Erlang环境和顺序编程Erlang并发编程Erlang分布式编程YawsErlang/OTP 日期              变更说明 2014-11-23 A Outl ...

  4. centos7 查询jdk安装路径

  5. Timer和TimerTask的用法

    最近在做java课程设计的时候,我用到了timer,于是学习了一下timer的用法. java实现多线程比较常用的两种方法,一种是直接继承Thread类,另一种则是实现Runnable接口.Timer ...

  6. ppDelegate的相关介绍

    //  AppDelegate的相关介绍//  IOS笔记 //@interface AppDelegate : UIResponder <UIApplicationDelegate>// ...

  7. 什么是JavaEE

    Java技术不仅是一门编程语言而且是一个平台.同时Java语言是一门有着特定语法和风格的高级的面向对象的语言,Java平台是Java语言编写的特定应用程序运行的环境.Java平台有很多种,很多的Jav ...

  8. 列表框QListWidget类

    QListWidget类也是GUI中常用的类,它从QListView下派生: class Q_GUI_EXPORT QListWidget : public QListView { Q_OBJECT ...

  9. WebJars 进行 css js 资源文件管理

    WebJars是将这些通用的Web前端资源打包成Java的Jar包,然后借助Maven工具对其管理,保证这些Web资源版本唯一性,升级也比较容易.关于webjars资源,有一个专门的网站http:// ...

  10. knockout 学习实例7 foreach

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...