<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. React Navite环境搭建

    俗话说"工欲善其事,必先利其器."所以,我们第一步就是搭建React Native开发坏境. 一.安装Node.js.npm.yarn 1.1 React native需要借助no ...

  2. 十二、21.提交本地代码到Git仓库并推送到码云

    查看分支 运行git add . 把所有修改过后文件添加到暂存区 git commit 把当前所有的代码提交到rights分支 加-m加一个消息 到此所有的功能模块都已经提交到了rights这个分支里 ...

  3. CVE-2020-1938 Tomcat AJP漏洞复现

    一  漏洞环境 # vulhub靶场地址 https://github.com/vulhub/vulhub靶场还需要有python环境,pip,docker docker-composeGitHub上 ...

  4. java 导入Excel数据校验判断哪行那列

    记录工作 需求是导入数据的时候需要判断哪一行是空行,或者哪一行超过限制字符,然后返回给前端做展示 @PostMapping("/importExcel") @ApiOperatio ...

  5. tool/js - ChineseToPinyin 汉语转拼音

    tool/js - ChineseToPinyin 汉语转拼音 Convert_Pinyin.js js如何简单实现汉字转成拼音的功能 pinyin-pro 官网 npm npm 安装 npm ins ...

  6. RockyLinux8.7 制作OpenSSH9.2 rpm包

    由于系统原装的openssh存在高危的漏洞,安全扫描不过,故制作出最新版本的rpm包修复openssh高危漏洞. 1.安装基础环境工具 dnf install wget make gcc perl r ...

  7. Qt头文件引用其他类，主类头文件报错(1)invalid use of incomplete type 'class xx::yy' (2)forward declaration of 'class xx::yy'

    其实这个错误很蠢,由于代码是从cpp文件直接copy过来的就没仔细看,但是他这个报错很有迷惑性,我们来看图: 就这行代码,从cpp文件中复制过来的: 本来目的呢就是提升这个变量的作用域,但是呢!!!在 ...

  8. 068_Apex&Page中的ReadOnly 使用方式

    一.page页面遇到需要检索大量数据的处理方式需要时会用Readonly 通常,对单个Visualforce页面请求的查询可能无法检索超过50,000行. 在Read only模式下,此限制将放宽允许 ...

  9. redis cluster 部署

    redis cluster 部署 服务器说明 192.168.2.200:7000 ... 192.168.2.200:7005 创建集群目录 mkdir cluster-test cd cluste ...

  10. 靶场练习1：Medium_Socialnetwork

    靶机链接 https://www.vulnhub.com/entry/boredhackerblog-social-network,454/ 信息收集阶段 进行主机的发现,由于已知主机跟Kali在同一 ...