<!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. MetaMask/metamask-extension-provider

    用来探测你的浏览器中有没有安装metamask插件 https://github.com/MetaMask/metamask-extension-provider MetaMask Extension ...

  2. tusen 刷题

    //1.single number和变体 //2.lru lfu 3.给一个正整数集合,求一个和最大且能被3整除的子集.Follow up: 如果集合里有正有负 4.leetcode200-numbe ...

  3. 谈谈HTTP

    HTTP又称超文本传输协议,在互联网上广为流传和应用. 今天主要讲这么几个? a.针对HTTP下细分为: HTTP概念.Request和Response详解.Request中GET和POST的区别.说 ...

  4. 基于window 7安装ubuntu 18.04双系统

    window7下安装ubuntu双系统 1.首先下载ubuntu镜像文件 进入ubuntu官网,http://releases.ubuntu.com/18.04/.下载最新镜像,ubuntu-18.0 ...

  5. Android 将若干张图片拼接在一起形成一个全新的图片

    目的:使用Android技术将若干张图片拼接成为一张图片. 最开始的两张图如下所示: 拼接后的图片如下图所示: 这样就把两张图片拼接成为一张了. 拼接步骤: 1.使用Bitmap创建一个空的Bitma ...

  6. (转)win7批量创建用户

    @echo off::zhangsan 改为你需要建立的用户名,123456改为你的密码,后面的两个参数的意思是“用户::不可以更改密码”和“密码永不过期”net user xiaowei 12345 ...

  7. Spark1.0.0属性配置

    1:Spark1.0.0属性配置方式 Spark属性提供了大部分应用程序的控制项,并且可以单独为每个应用程序进行配置. 在Spark1.0.0提供了3种方式的属性配置: SparkConf方式 Spa ...

  8. 一个IOS自动化打包的脚本

    网上找了一个脚本,在其中进行了修改,只需要一条命令就可以了 支持自动导入配置文件 支持自动安装p12证书 支持自动修改版本号和build版本号 支持自动修改app显示名称 支持自动修改bundle i ...

  9. typedef你真的理解么？

    typedef,用最简单的话去诠释他,那么就是给类型取别名!!!  但是他并没有你想象的那么简单! 举例: typedef int size;//那么int就有一个别名叫size了,以后就可以 siz ...

  10. Linux下的openvpn配置 与 easy-rsa3的证书生成

    #注意:以下操作由服务端操作即可#PS:为什么我找不到var文件??============安装===============wget -O /etc/yum.repos.d/epel.repo ht ...