如何用写js弹出层 ----2017-03-29
<!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的更多相关文章
- js弹出层
js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...
- 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 ...
- 简单 JS 弹出层 背景变暗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在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/ ...
随机推荐
- 4.Projects and Scenes介绍
1.Project 一个项目是由一系列的文件(如图片.音频.几何).场景以及vzp文件组成.这些文件被导入到项目对应的文件夹中.项目外部资源在场景中被使用后,会导入项目中,除非该资源被标记为外部引用. ...
- html行级元素和块级元素以及css转换
之前有说过html的标签是有语义的,当然也就有一些默认的样式,比如标题有h1···h6,他们的字体由大至小一次递减,字体比一般字体要加粗. 这样也就有了行级元素和块级元素,下面来看看什么是行级元素什么 ...
- 基于jQuery封装一个瀑布流插件
/*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this* ...
- Android 解决toolbar标题不显示问题
问题原因:toolbar的兼容性有问题 解决办法: setSupportActionBar(toolbar); toolbar使用步骤: 1.编写menu.xml 为了保持兼容需要这样写: andro ...
- Android Studio复制项目 两个App之间不覆盖安装操作步骤
步骤一:修改包名 第五步注意:不能以数字等作为包名的开头. 步骤二:修改清单文件里面的包名 第八步注意:如果报红,从新引入新的包名下的Mainactivity类. 步骤三:修改Gradle Scrip ...
- Vue2:实例生命周期、js生命周期
1.vue2生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM ...
- Java中的强制转换
特点: 1.需要程序员手动修改代码 2.语法:范围小的类型 变量名 = (范围小的类型)范围大的类型的数据 3.从范围小 到 范围大 注意: 强制类型转换可能会造成数据的丢失哦,小伙伴们在应用时一定 ...
- Oracle语句执行顺序
- ConcurrentHashMap 并发HashMap原理分析
ConcurrentHashMap和Hashtable主要区别就是围绕着锁的粒度以及如何锁.如图 左边便是Hashtable的实现方式---锁整个hash表:而右边则是Concurrent ...
- PHP面向对象(一)
1 面向对象介绍 1.1 介绍 面向对象是一个编思想. 编程思想有面向过程和面向对象. 面向过程: 编程思路集中的是过程上 面向对象: 编程思路集中在参与的对象 1.2 好处 多人合作方便 ...