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/ ...
随机推荐
- 随手练——DFS小练
1. 单词接龙 https://www.luogu.org/problemnew/show/P1019 题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头 ...
- Linux备份压缩命令
gzip 命令 把/home/chenjialins目录下的familyA目录下所有文件压缩成.gz文件cd /home/chenjialinstar -cvf /home/chenjialins/f ...
- 一兄弟把/etc/init.d/functions误删除了，这是多么悲催的节奏啊；
RPM resource /lib/lsb/init-functions /lib/lsb/init-functions vs. /etc/init.d/functions in init scrip ...
- 映众全新游戏内存条发布：单条16GB 最高4000MHz
近日,显卡与内存厂商映众(INNO3D)推出了一款全新的游戏内存条产品——iCHILL Memory. iCHILL Memory是DDR4内存,单条容量有4GB-16GB可选,内存频率有2400MH ...
- Python2.7-zlib
zlib 模块,提供了压缩和解压缩的函数,都是对字符串进行操作的,可以理解为是各种不同类型的数据经过处理成为字符串或是二进制字符串,再进行压缩解压缩.是和 gzip 相兼容的压缩模块 模块方法: zl ...
- ROS 安装kinect驱动+测试
有时 ,需要用到kinect 的所有需要驱动才能使用kinect ,turtlebot2上的传感器就是kinect ,所以kinect 的用处还是很多的 , 今天就来讲一下kinect 驱动在unbu ...
- python json 解析
Encode过程,是把python对象转换成json对象的一个过程,常用的两个函数是dumps和dump函数. dic1 = {'type':'dic1','username':'loleina',' ...
- 20155204 王昊《网络对抗技术》EXP2 后门原理与实践
20155204 王昊<网络对抗技术>EXP2 后门原理与实践 一.实验内容 准备工作(试用ncat.socat) 1. 使用netcat获取主机操作Shell,cron启动. 明确目标: ...
- 20155222卢梓杰 实验一 逆向及Bof基础
实验一 逆向及Bof基础 1.实验对象为32位可执行文件pwn1,这个程序主要有main.foo.getshell这三个函数,其中foo函数功能为输出输入的字符串,getshell函数功能为打开一个s ...
- 20155229《网络对抗技术》Exp9：Web安全基础
实验内容 Webgoat实践下相关实验. 实验步骤 WebGoat: Webgoat是OWASP组织研究出的一个专门进行web漏洞实验的应用品台,这个平台里包含了web中常见的各种漏洞,例如:跨站脚本 ...