<!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弹出层学习的更多相关文章

  1. js弹出层

    js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...

  2. 简单 JS 弹出层 背景变暗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery.blockUI.2.31.js 弹出层项目介绍

    {insert_scripts files='user.js'} <style type="text/css"> #float_login{border:1px sol ...

  4. js 弹出层，以及在javascript里定义层样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  6. JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  7. Js弹出层，弹出框代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. div+js 弹出层

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. JS 弹出层 定位至屏幕居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 网络嗅探与欺骗（FTP部分）——P201421410029

    第三部分 FTP协议分析 1. 两个同学一组,A和B. 2.A同学架设FTP服务器,并设置用户名和密码,例如wbx /wbx 3.B同学在机器中安装Wireshark,并将其打开:之后用用户名和密码登 ...

  2. OpenCV——直方图计算、寻早最值位置和对比匹配（判断两幅图的相似程度）

  3. html5获取地理位置信息API

    html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...

  4. PAT B1003 我要通过！

    “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于PAT的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”. 得到“答案正确”的条件是: 1 ...

  5. JAVA框架 Mybaits 输入和输出映射

    一.输入映射 当前端传来的参数,比较复杂,比如说用户名称.订单单号.账号信息等等.后端有可能有多个projo类对应这些信息.我们需要把这些的projo类封装成一个类似一个vo类. 通过设置字段形式关联 ...

  6. C. Greedy Arkady

    kk people want to split nn candies between them. Each candy should be given to exactly one of them o ...

  7. 五,ESP8266 TCP服务器多连接(基于Lua脚本语言)

    https://www.cnblogs.com/yangfengwu/p/7524326.html 一些时间去准备朋友的元器件了... 接着写,,争取今天写完所有的文章,,因为答应了朋友下周5之前要做 ...

  8. 关于C#中async/await中的异常处理（下）-（转载）

    上一篇文章里我们讨论了某些async/await的用法中出现遗漏异常的情况,并且谈到该如何使用WhenAll辅助方法来避免这种情况.WhenAll辅助方法将会汇总一系列的任务对象,一旦其中某个出错,则 ...

  9. 20155227《网络对抗》Exp7 网络欺诈防范

    20155227<网络对抗>Exp7 网络欺诈防范 实践内容(3.5分) 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体实践有 (1)简单应用SET工具建 ...

  10. 【php增删改查实例】第八节 - 部门管理模块（编写PHP程序）

    首先,在同级目录新建一个query.php文件: 接着,去刷新页面,打开F12,NetWork,看看当前的请求能不能走到对应的php文件? 这就说明datagrid确实能够访问到query.php 只 ...