<!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. 3.7 AnsyncTask异步任务

    3.7 AnsyncTask异步任务. 1)为什么要用AsyncTask? 答: 我们可以用上述两种方法来完成我们的异步操作,加入要我们写的异步操作比较多,或者较为繁琐, 难道我们new Thread ...

  2. [luogu2469] 星际竞速

    题面 ​ 巨佬一眼就能看出这是最小路径覆盖, 我这个蒟蒻还是太弱了... ​ 我们可以知道跳跃值为点权w[i], 两点之间距离为边权ww ​ 对于每个点, 在最小路径覆盖问题中, 假设每个点都是一条路 ...

  3. 如何为一个类型为Color的属性设置默认值

    最近在研究GDI+的时候,用winform来写自定义控件遇到需要为控件的属性设置默认值,但这个属性的类型是System.Drawing.Color.本文只是总结一下各种设置的方法. Example [ ...

  4. PRML5-神经网络（2）

    本节来自<pattern recognition and machine learning>第5章. 接(PRML5-神经网络(1)) 5.5NN中的正则化 NN的输入层和输出层的单元个数 ...

  5. 几个PHP读取整个文件的函数readfile()、fpassthru()和file()

    2.7.4   读取整个文件:readfile().fpassthru()和file()除了可以每次读取文件一行外,还可以一次读取整个文件.PHP提供了4种不同的方式来读取整个文件.第一种方式是rea ...

  6. 第12章 GPIO输入—按键检测

    第12章     GPIO输入—按键检测 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fi ...

  7. 基于Python自动上传包到nexus仓库

    1.设计思路 用户通过excel表格的形式填写包的信息,并将包一起发送给负责人 2.代码实现 #coding:utf8 import os import xlrd def GetData(fileNa ...

  8. CSS之Header--我的头部我做主

    <div class='header'> <div class="header-left"> <span class='iconfont back-i ...

  9. 20155202《网络对抗》Exp9 web安全基础实践

    20155202<网络对抗>Exp9 web安全基础实践 实验前回答问题 (1)SQL注入攻击原理,如何防御 SQL注入产生的原因,和栈溢出.XSS等很多其他的攻击方法类似,就是未经检查或 ...

  10. 20155320《网络对抗》Exp2 后门原理与实践

    20155320<网络对抗>Exp2 后门原理与实践 [实验内容] (3.5分) (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, ...