<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.mask{
width: 100%;
/* height: 800px;*/
z-index: 998;
background-color: lightslategrey;
opacity: 0.5;
position: absolute;
top: 0px;
left: 0px;
}
.login{
height: 300px;
width: 400px;
background-color: greenyellow;
position: fixed; /*不能设置为relative;否则登录框位置会移动 */
/*left: 100px;
top: 40px;*/
z-index: 999; /*设置显示先后顺序*/ }
.close-btn{
height: 30px;
width: 30px;
text-align: center;
vertical-align: middle;
line-height: 30px;
position: absolute;
right: 10px;
top: 10px;
border: 1px solid black;
font-size: 25px; }
</style>
</head>
<body>
<input type="button" value="登录" onclick="showLogin()"/>
<!-- <div class="mask"></div>-->
<!--<div class="login">
<div class="close-btn">X</div>
</div>-->
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </body>
</html>
<script>
function showLogin(){
var bodyheight=document.body.clientHeight; //获取body高度
var mask=document.createElement("div"); //创建一个div
mask.className="mask";
mask.style.height=bodyheight+"px"; //获取mask的高度,必须从style中获取
document.body.appendChild(mask); //显示遮罩层 mask.onclick = function(){ // 作用:点击遮罩层关闭
mask.remove();
login.remove();
} var lwidth=document.documentElement.clientWidth;
var lheight=document.documentElement.clientHeight;
var login=document.createElement("div");
login.className="login";
login.style.left=lwidth/2 - 200+"px";
login.style.top=lheight/2 - 150+"px";
login.innerHTML="<div class='close-btn'>X</div>"; //必须是html,text读不出样式
document.body.appendChild(login); document.getElementsByClassName("close-btn")[0].onclick = function(){
mask.remove();
login.remove(); //作用:点击X关闭
}
}
document.body.onresize = function(){ //作用:设置登录框随窗体大小变化
var clientHeight = document.documentElement.clientHeight;
var clientWidth = document.documentElement.clientWidth;
var login = document.getElementsByClassName("login")[0];
login.style.left = clientWidth/2 - 200 + "px";
login.style.top = clientHeight/2 - 150 + "px";
} </script>
重点:
1、利用DOM创建新的DIV,获取所需要的高度和宽度;
2、有关js的高度问题看下一篇博客。
3、z-index; className; onresize会在窗口或框架被调整大小时发生

如何用写js弹出层 ----2017-03-29的更多相关文章

  1. js弹出层

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

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

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

  3. js 弹出层,以及在javascript里定义层样式

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

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

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

  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. JavaScript命名空间的理解与实现

    命名空间有效防止函数名/类名和其他人的冲突,在使用多个第三方框架或类库的时候,一旦冲突,唯一能作的就是放弃其中一个.从事Web开发不可避免要接触JavaScript,目前最新版本的JavaScript ...

  2. the selection cannot be run on any server

    导入war包后运行jsp 显示: the selection cannot be run on any server 问题原因: Dynamic Web Module 的版本与server不匹配.Dy ...

  3. python3爬虫:下载网易云音乐排行榜

    #!/usr/bin/python3# -*- encoding:utf-8 -*- # 网易云音乐批量下载 import requestsimport urllib # 榜单歌曲批量下载# r = ...

  4. Jmeter报内存溢出解决方案

    描述:wimdows环境,做上传图片接口测试,涉及图片合成和上传,图片采用base64编码.每1s启动200线程的时候,Jmeter报内存溢出错误. 解决方案: 1.修改jmeter.bat: set ...

  5. apiCloud中aui获取不到高度,pos.h为0,offsetHeight为0问题

    apiCloud中aui获取不到高度,pos.h为0,offsetHeight为0问题 原HTML <div class="row aui-text-center"> ...

  6. mac上安装flask详细步骤

    1  在终端输入 macdeMac-mini-62:~ mac$ sudo easy_install pip 2 macdeMac-mini-62:~ mac$ sudo pip install fl ...

  7. mysql8下载与安装

    MySQL各版本的区别 MySQL 8.0.13安装教程(windows 64位)   编码用utf8mb4 Navicat连接mysql出现1862错误

  8. Vue2实例中的data属性三种写法与作用

    <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app ...

  9. ASP组件AspJpeg(加水印)生成缩略图等使用方法

    ASP组件AspJpeg(加水印)生成缩略图等使用方法 作者: 字体:[增加 减小] 类型:转载 时间:2012-12-17我要评论 ASPJPEG是一款功能相当强大的图象处理组件,用它可以轻松地做出 ...

  10. P1085 不高兴的津津

    ... 题目描述 津津上初中了.妈妈认为津津应该更加用功学习,所以津津除了上学之外,还要参加妈妈为她报名的各科复习班.另外每周妈妈还会送她去学习朗诵.舞蹈和钢琴.但是津津如果一天上课超过八个小时就会不 ...