<html>

<head>

<title>aaa</title>

<script type="text/javascript">

    window.onload = function () {

        document.getElementById("divshow").style.display = "none";

    }

    function btnclick() {

        document.getElementById("divshow").style.display = "block";

    }

</script>

<style type="text/css">

body

{

  margin:0px;

  padding:0px;

}

#divshow

{

    position: fixed;  /*相对于浏览器窗口进行定位*/

    *position:absolute;

    left: 0px;

    top: 0px;

    width: 100%;

    height: 100%;

     /* 透明度*/

    display:none;

    z-index:999;

}

#divGary

{

    width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);position:absolute;left:0px;top:0px; z-index:1;

}

</style>

</head>

<body>

     <input type="button" id="btnShow" onclick="btnclick()" value="显示遮罩" />

  <div id="divshow">

            <div id="divGary" ></div>    <!--后面的遮罩-->

           <div style=" width:500px; height:312px; left:50%; top:50%; position:relative;z-index:2; background-color:#fff; margin-left:-150px; margin-top:-100px;border-radius:5px;" >  <!--显示层-->

              <div >

                    <div style=" text-align: center;color: red;font-weight: bold;font-size: 21px;"><p style="padding-top: 30px;">你妹</p></div>

                    <div style="text-indent: 2em;width: 400px;margin: 16px auto;line-height: 2;font-size: 18px;font-weight: bold;">你妹的具体内容</div>

              </div>

              <div style="width: 228px;margin: -14px auto; margin-left:117px;">

                  <input id="btngobuy" class="input_but" type="button" value="找你妹" style=" display:none;" />

                  <input id="btnnext" class="input_but" style="margin-left: 71px;"  type="button" value="不找你妹了" />

              </div>

           </div>

        </div>

</body>

</html>

Html遮罩层的显示(主要在于样式设置)的更多相关文章

  1. 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题

    最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...

  2. jquery 遮罩层显示img

    如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶 ...

  3. Jquery超简单遮罩层实现代码

    看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: <style type="text/css"> .mask { pos ...

  4. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

  5. jQuery遮罩层登录对话框

    用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...

  6. css实现遮罩层，父div透明，子div不透明

    使用元素的opacity 属性,设置遮罩层的效果, 主要 样式是:background-color: #ooo; opacity:0.3; <div style="width:500p ...

  7. java javaScript实现遮罩层 动态加载

    通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关 ...

  8. ios遮罩层的简单使用

    /** 大图 */ - (IBAction)bigImg { //1.添加按钮遮罩层 UIButton *cover=[[UIButton alloc] init]; cover.frame=self ...

  9. 在HTML中实现和使用遮罩层

    Web页面中使用遮罩层,可防止重复操作,提示loading:也可以模拟弹出模态窗口. 实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片.在下面的示例代码中,同时展示了如何在i ...

随机推荐

  1. Android XListView下拉刷新、上拉载入更多

    source code: https://github.com/Maxwin-z/XListView-Android 提供了两个接口: a) IXListViewListener:  触发下拉刷新.上 ...

  2. C 语言开发初涉-01 简单学习

    尝试用C语言写windows程序: 简单的计算器 1.0版,仅用来熟悉C 开发windows的一些语法和语句用法 #include "stdafx.h" #include < ...

  3. 报错分析---->jsp自定义标签：类cannot be resolved to a type

    这个困扰我一个晚上,仔细上网查阅发现,主要是因为jsp自定义标签要用到的这个jsp-api.jar的问题 这是我eclipes中的jar: 然而jsp-api.jar这个jar在tomcat中也有(报 ...

  4. 演示一个简单的Redis队列

    0.Windows Service版下载 https://github.com/rgl/redis/downloads 1.新建一个Console项目 打开Nuget控制台,执行以下命令 Instal ...

  5. HDU3342有向图判圈DFS&&拓扑排序法

    HDU3342 Legal or Not 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3342 题目意思:一群大牛互相问问题,大牛有不会的,会被更厉害 ...

  6. node.js使用require给flume提交请求

      node.js使用require给flume提交请求 - 简书 https://www.jianshu.com/p/02c20e2d011a     玄月府的小妖在debug 关注 2017.04 ...

  7. 用Python构建你自己的推荐系统

    用Python构建你自己的推荐系统 现如今,网站用推荐系统为你提供个性化的体验,告诉你买啥,吃啥甚至你应该和谁交朋友.尽管每个人口味不同,但大体都适用这个套路.人们倾向于喜欢那些与自己喜欢的其他东西相 ...

  8. npm install命令对package-lock.json文件自动做了一些额外的更新

    今天我使用 npm 命令给项目安装file-saver,通过git却发现package-lock.json中除了file-saver组件之外的其他组件的记录也被改了 npm为何会自动做这些更改呢,又如 ...

  9. qemu网络虚拟化之数据流向分析一

    插曲:   今天下午欣喜的想写点关于qemu网络部分的功能,但是中途出现了点小插曲,电脑被某人搞得死机了,并且文章也没有保存.结果,,,就只能重新写了!!所以这里强烈建议开发团队提供自动保存的功能! ...

  10. SQLALchemy的其他常用操作

    使用连接池的两种方式 第一种方式: 直接从SessionFactory里获取,此时如果需要开启多个进程,那么创建连接池的代码一定要放在循环里面 不然的话每个进程都是用一个session了 from s ...