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/ ...
随机推荐
- Rsyslog配置文件详解(转)
最近在搭建日志审计服务器,使用了rsyslog,发现这篇文章很有用,收藏一下. 原文链接:http://my.oschina.net/0757/blog/198329 具体内容: 非常详细的rsysl ...
- shiro实战系列(十三)之单元测试
由于我们已经涉及到了 Subject reference,我们知道 Subject 是“当前执行”用户的特定安全视图,且该 Subject 实 例绑定到一个线程来确保我们知道在线程执行期间的任何时间是 ...
- ArcGIS 9.3下载，包含ArcGIS Desktop、ArcGIS Engine、ArcGIS Server、ArcSDE、workstation
KeyWord:ESRI ArcGIS 9.3 Desktop Server Engine ArcEngine ArcIMS ArcSDE Workstation ECP Lisence Crack ...
- python获得命令行参数的方法
#encoding=utf8 import sys reload(sys) sys.setdefaultencoding("utf8") print "参数名: &quo ...
- mysql的常用优化知识
索引类型:主键索引,唯一索引,联合索引,普通索引,全文索引 建立索引: create index index_name on table(field_name); 删除索引: drop index i ...
- 微信OAuth2.0网页授权接口
微信OAuth2.0网页授权接口 微信OAuth2.0网页授权接口的thinkphp实现版本号.主要实现了oauth网页受权,以及部分其它接口. 用法 为什么用OAuth2.0受权? 通过OAuth2 ...
- 编写Linux脚本
下面是重新启动Linux下某进程的shell脚本.以tomcat进程为例: #!/bin/sh pid=`ps -ef|grep tomcat|grep -v grep|awk '{print $2} ...
- MAC下配置ssh让SourceTree通过秘钥访问远程仓库
问题描述 由于TortoiseGit没有MAC版本,我们使用了SourceTree来替代. 在帮同事解决Mac下的Git的时候,碰到一个问题:SourceTree无法使用ssh方式提交代码,这是由于没 ...
- OpenCV学习C++接口 Mat像素遍历详解
OpenCV学习C++接口 Mat像素遍历详解
- HDU-6356 Glad You Came (线段树)
题目链接:Glad You Came 题意:数组有n个数初始为0,m个询问,每个询问给出L R V(按照给定函数生成),将数组的下标L到R的数与V取较大值,最后输出给定的公式结果. 题意:哇~打比赛的 ...