<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. 【C学习笔记】day4-2 求出0～999之间的所有“水仙花数”并输出。

    2.求出0-999之间的所有"水仙花数"并输出."水仙花数"是指一个三位数,其各位数字的立方和确好等于该数本身,如:153＝1+5+3?,则153是一个&quo ...

  2. ES搜索- term与match区别&bool查询

    term属于精确匹配,只能查单个词,tems可以匹配多个词(满足其中之一词的都会被搜索出来),多个词如果要同时匹配使用bool的must(must中带多个term): match进行搜索的时候,会先进 ...

  3. Vuex扫描自定义文件夹下的所有文件

    解决问题:当我们规范 model 统一放在某个文件夹下,且可以通过子文件夹分类.当新加model时又不想去修改别的地方. 代码 // /src/sotre/index.js 1 import { cr ...

  4. ps 合并两张图片为一张

    打开PS并点击左上角的"文件":之后再点击"打开"(也可以按下快捷键"Ctrl+O"),打开文件选择窗口. 2 在打开的文件选择窗口中,找到 ...

  5. requests学习笔记02

    一.会话对象 会话对象让你能够跨请求保持某些参数.它也会在同一个 Session 实例发出的所有请求之间保持 cookie, 期间使用 urllib3 的 connection pooling 功能. ...

  6. 关于ie浏览器query ajax提交单个操作无效

    第一次写博客 大家不要喷我!!!! 需求需要开发一个无刷新的用户注销和恢复注销功能 遇到的实际问题直接贴图----> 这是开始页面 当点击红xx时提示修改成功 这里似乎是对的哈 但是等点击刷新的 ...

  7. redis的linux下安装

    Linux 源码安装 下载地址:http://redis.io/download,下载最新稳定版本. 本教程使用的最新文档版本为 2.8.17,下载并安装: # wget http://downloa ...

  8. 源码编译mariadb

    1.写一个一键安装 mariadb 数据库脚本. [root@centos8mini ~]#vim install_mariadb #!/bin/bash#安装包PACKAGE="maria ...

  9. 小白之Python-基础中的基础05

    Python-基础中的基础05 --之元组 #元组:不可变更1. 创建元组:元组必须用,表示,只加()是不行的 print 42 print (42) print 43, #这个地方会把下一行的内容打 ...

  10. 手机、ESP32单片机、MQTT服务器连接实验

    实验目的:通过自己制作的手机APP,连接MQTT服务器,获取ESP32单片机的温湿度信息,控制ESP32单片机上的LED开关. 实验准备: 1.硬件:ESP32开发板(型号不限,esp01s也可以). ...