<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. 通过url跳转到页面锚点

     在需要跳到的页面加: function GetQueryString(name) {       var reg = new RegExp("(^|&)" + name ...

  2. CloudFlare Workers部署Pixiv图片反代

    CloudFlare Workers部署Pixiv图片反代 众所周知,pixiv的图片伺服器网域为i.pximg.net,因为有盗连保护,只要Referer是空值或不是来自pixiv的网域就会返回40 ...

  3. swagger TypeError: Failed to fetch

    最近开发一个项目,项目接口规范是swagger,初次使用swagger遇见很多问题,通过写博记录在项目中遇见的swagger各种情况 我项目中解决方法: 改为: 需要与自己在laravel  框架中e ...

  4. cdn全栈加速nginx二层代理实现

    1 nginx.conf中添加配置如下: server { listen 5050; location / { proxy_pass http://代理IP:3333; proxy_set_heade ...

  5. vue中组件传值的几种方式

    一.父组件给子组件传值方式(步骤) 1.VC1(子组件)定义props[a,b,c] 注意:props中的每个值都可以加各种修饰,如数据类型,是否可为空,默认值... 2.VC2(父组件)引用子组件 ...

  6. MobaXterm汉化版教程

    MobaXterm中文版是一款非常好用的远程连接.远程控制软件,它堪称全能终端神器,支持非常多的远程协议 ,如SSH,Telnet,Rsh,Xdmc,RDP,VNC,FTP,SFTP,串口(Seria ...

  7. NEO4J入门基础第二章

    1.简单导入CSV数据 Load CSV读取但不存入数据库: 查看前CSV文件行数 LOAD CSV FROM "file-url" AS line RETURN count(*) ...

  8. Go--解析yaml文件

    yaml 文件是目前最常用的配置文件,使用go语言编写代码和工具时,也会用到yaml文件,将服务配置及中间件等信息定义到yaml文件中,后续可根据实际场景来选用. //先下载外部包 go get -u ...

  9. （未完成）JAVAWEB学习——

    一.Servlet开发 1.sun公司提供的一种动态web资源开发技术,本质上就要是一段Java小程序,可以将Servlet加入到容器中运行Servlet. *servlet容器 -- 能够运行ser ...

  10. wsl2 的安装与使用

    wsl2 简介 wsl2 是 window 自家做的虚拟机,如果初次接触,可以建立的理解为 vmware.只不过他是 window 公司自己开发的,所以从兼容性上来讲,会更好一些. 我个人选择使用 w ...