<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#login
{
display:none;
border:1em solid purple;
height:30%;
width:50%;
position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
left:24%;
z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
background: white;
}
#over
{
width: 100%;
height: 100%;
opacity:0.8;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/
filter:alpha(opacity=80);
display: none;
position:absolute;
top:0;
left:0;
z-index:1;
background: silver;
}
</style>
<script type="text/javascript">

function show()
{
var login = document.getElementById('login');
var over = document.getElementById('over');
login.style.display = "block";
over.style.display = "block";
}
function hide()
{
var login = document.getElementById('login');
var over = document.getElementById('over');
login.style.display = "none";
over.style.display = "none";
}
</script

</head>
<body>
<a href="javascript:show()">弹出</a>
<div id="login">
<a href="javascript:hide()">关闭</a>
<div>这里是关闭弹窗的内容</div>
</div>
<div id="over"></div>
</body>

div css 页面中心弹窗窗口的更多相关文章

  1. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  2. 第6天：DIV+CSS页面布局实战

    今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...

  3. 一、CSS概述 二、CSS的选择器（认识） 三、CSS样式和属性（练习） 四、重构商城首页DIV+CSS(页面布局)（重点） 浮动/更改显示方式

    一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...

  4. 简单实现div+css页面自适应

    Step1.在<head>添加如下代码<meta name="viewport" content="width=device-width, initia ...

  5. Div+Css（一）必备知识

    我只积累我不知道的 参考链接 http://www.kwstu.com/ArticleView/divcss_201442291125960 http://www.kwstu.com/ArticleV ...

  6. HTML+CSS-采用DIV+CSS布局的利弊

    单纯的TABLE表格,在浏览器运行上面来说,其效率不如DIV+CSS方式快速,当然,这样也就会影响用的体验. 而且,针对于相同的HTML页面来说TABLE布局,不利于搜索引擎的爬虫爬行下载页面.从而造 ...

  7. Div+Css布局教程（-）CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

  8. DIV+CSS:页脚永远保持在页面底部

    页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...

  9. css笔记：如何让一个div居于页面正中间

    如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...

  10. 利用css来让一个div在页面中垂直居中的方法

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

随机推荐

  1. 在docker中，运行Jcmd命令，报错

    起因: 想调整JVM的设置,观察一下当前jvm进程的资源情况. 输入:docker exec -it xxxxx /bin/sh 输入: jcmd 1 help ,报错 com.sun.tools.a ...

  2. VSCODE 界面设置

    如上图所示: 用插件background-cover ,再设置下图片路径即可,程序员专属的开发DIY界面随手可得 当然添加账号来同步,以后设置一次即可随时同步

  3. Sql Sugar 使用

    sql sugar orm文档地址: SqlSugar ORM 5.X 官网 .文档.教程 - SqlSugar 5x - .NET果糖网 (donet5.com) sql sugar 基本用法大全, ...

  4. Oralyzer-20220205

    Usage: oralyzer.py [-h] [-u URL] [-l PATH] [-crlf] [-p PAYLOAD] [--proxy] [--wayback] 可选参数: -h, --he ...

  5. Java中保留两位小数之format

    String.format仅限double类型可用 int类型会报错 double d1 = 6.6666;System.out.println(String.format("%.2f&qu ...

  6. hexo部署和优化记录

    title: hexo部署和优化记录 date: 2020-06-14 09:00:03 前端 tags: hexo summary: Repository_Pages使用.Github仓库打造网页群 ...

  7. .Net最小工作线程对应用程序性能的影响

    这要从Asp.Net建立连接的机制说起,Asp.Net建立连接依赖于.Net线程池,线程池的大小决定了应用程序最多可以同时执行的请求数量.maxWorkerThreads最大工作线程,决定单个处理器最 ...

  8. sxt_(003_007)_tomcat

    一.web服务器 接受浏览器请求,进行结果响应. 常见的web服务器:tomcat.jboss.weblogic.websphere.resin.jetty.二.tomcat下载: 去apache官网 ...

  9. Redis的不同客户端对比

    Redis 官方推荐的 Java 客户端有Jedis.lettuce 和 Redisson 客户端 简介 优点 缺点 Jedis 提供了比较全面的 Redis 操作 Jedis 简单全面, 支持 pi ...

  10. echarts 之 source and clone函数问题hasOwnProperty is not defined

    图表渲染时报错如下: echarts 实例的 setOption 方法用来加载/更新图表数据,setOption 方法内部首先使用了 zrender 的 clone 函数对 options 进行了拷贝 ...