js弹出层学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#mask{
width:100%;
height: 1000px;
position:absolute;
top:0;
left:0;
opacity:0.75;
background: #ccc;
filter: alpha(opacity=75);
z-index:1000;
}
#login{
position:fixed;
left:30%;
top:30%;
z-index:1001;
}
.loginCon{
width:670px;
height:380px;
background:url(img/loginbg.png) no-repeat;
position:relative;
}
#close{
width: 30px;
height: 30px;
position: absolute;
background: url("img/close.png") no-repeat;
top:5px;
right:5px;
}
</style>
<script>
function openNew()
{
//获取的是窗口的宽度和高度，
var sHeight = document.documentElement.scrollHeight;
var sWidth = document.documentElement.scrollWidth;
var oMask = document.createElement("div");
oMask.id = "mask";
oMask.style.height = sHeight +"px";
oMask.style.width = sWidth + "px";
document.body.appendChild(oMask);
var oLogin = document.createElement("div");
oLogin.id = "login";
oLogin.innerHTML = "<div class='loginCon'> <div id='close'></div> </div>";
document.body.appendChild(oLogin);
//获取的是可视区域的宽度和高度，就是能看到的，一般宽度不变，高度会变
var vHeight = document.documentElement.clientHeight;
//获取某个对象的宽度和高度
var dHeight = oLogin.offsetHeight;
var dWidth = oLogin.offsetWidth;
//为了让其居中，
oLogin.style.left = (sWidth-dWidth)/2 + "px";
oLogin.style.top = (vHeight-dHeight)/2 +"px";
var oClose = document.getElementById("close");
oClose.onclick = oMask.onclick = function(){
document.body.removeChild(oMask);
document.body.removeChild(oLogin);
}
}
window.onload = function(){
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
openNew();
}
}
</script>
</head>
<body>
<button id="btn">登陆</button>
</body>
</html>
js弹出层学习的更多相关文章
- js弹出层
js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...
- 简单 JS 弹出层 背景变暗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery.blockUI.2.31.js 弹出层项目介绍
{insert_scripts files='user.js'} <style type="text/css"> #float_login{border:1px sol ...
- js 弹出层，以及在javascript里定义层样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...
- JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题
HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...
- Js弹出层，弹出框代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div+js 弹出层
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JS 弹出层 定位至屏幕居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 图解：图形下控制台中weblogic9.2多池配置为oracle集群RAC
update: 这个东西如果配置不顺利的话:应用请求数据库的时候,会打印类似这样的错误: :open connection err Pool connect failed : weblogic.com ...
- java读写properties配置文件不改变属性的顺序和注释
先贴代码 import java.io.BufferedWriter; import java.io.File; import java.io.FileInputStream; import java ...
- SNAT和DNAT
1.SNAT iptables防火墙 Centos6.6 64位 iptables 内网:eth0 172.16.4.1 外网:eth 112.112.112.112/24 当有用户访问公网时,修改用 ...
- 3-51单片机ESP8266学习-AT指令(学会刷固件)
前言:体验一下刷固件(给单片机更新程序) 上一篇链接 http://www.cnblogs.com/yangfengwu/p/8757036.html 源码链接:https://pan.baidu. ...
- pv，uv的意义
PV(page view),即页面浏览量,或点击量;通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标. 高手对pv的解释是,一个访问者在24小时(0点到24点)内到底看了你网站几个页面.这里 ...
- 关于PCB的线宽与过孔
关于PCB的线宽与过孔 我们在画PCB时一般都有一个常识,即走大电流的地方用粗线(比如50mil,甚至以上),小电流的信号可以用细线(比如10mil). 对于某些机电控制系统来说,有时候走线里流过的瞬 ...
- 20155220 Exp5 MSF基础应用
Exp5 MSF基础应用 一个主动攻击实践,MS08-067 首先利用msfconsole启用msf终端 然后利用search MS08-067搜索漏洞,会显示相应漏洞模块 根据上图,我们输入use ...
- 2017-2018-2 《网络对抗技术》 20155302 第二周 Exp1 PC平台逆向破解(5)M
2017-2018-2 <网络对抗技术> 20155302 第二周 Exp1 PC平台逆向破解(5)M 1-实践目标 1.1-实践介绍 本次实践的对象是一个名为pwn1的linux可执行文 ...
- 20155327 实验四 Android程序设计
20155327 实验四 Android程序设计 任务一: 完成Hello World, 要求修改res目录中的内容,Hello World后要显示自己的学号 步骤: 将布局文件activity_ma ...
- vue 打包后，后缀名为.woff等字体问题不能用解决办法
1.打开 build / webpack.prod.conf.js ,找到 module: { rules: utils.styleLoaders({ sourceMap: config.build. ...