知识要点
1.遮罩层的宽度和高度是js获取页面的宽高(页面内容)
//获取遮罩层(内容)的高度和宽度 var sheight=document.documentelement.scrollheight; var swidth=document.documentelement.scrollwidth;
2.登录框设置静止定位fixed
3.登录框居中显示公式:(可视区域宽高-登录框宽高)/2
//获取login的宽度和高度并设置偏移值 var dheight=ologin.offsetheight; var dwidth=ologin.offsetwidth; ologin.style.left=(swidth-dwidth)/2+"px"; ologin.style.top=(wheight-dheight)/2+"px";
完整代码
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>demo</title> <style> body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier new,courier,monospace;} small{font-size:12px;} ul,ol{list-style:none;} a{text-decoration:none;} a:hover{text-decoration:underline;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} .clear{clear: both;float: none;height: 0;overflow: hidden;} p{font-size: 100px;} #mask{ background: #000; opacity: 0.75; filter: alpha(opacity=75); height: 1000px; width: 100%; position: absolute; left: 0; top: 0; z-index: 1000; } #login{ position: fixed; left: 30%; top: 30%; z-index:1001; } .logincon{ width: 670px; height: 380px; background: #fff; border:5px solid #f01400; } #close{ width: 30px; height: 30px; background: blue; cursor: pointer; position: absolute; right: 10px; top: 10px; } #btnlogin{ width: 80px; height: 40px; background: #f01400; margin:0 auto; display: block; cursor: pointer; border-style: none; color: #fff; font-size: 16px; } </style> </head> <body> <button id="btnlogin">登录</button> <!-- <div id="mask"></div> <div id="login"> <div class="logincon"> <div id="close"></div> </div> </div> --> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <script type="text/javascript"> function opennew(){ //获取页面body!内容!的高度和宽度 var sheight=document.documentelement.scrollheight; var swidth=document.documentelement.scrollwidth; //获取可视区域高度,宽度与页面内容的宽度一样 var wheight=document.documentelement.clientheight; //创建遮罩层div并插入body var omask=document.createelement("div"); omask.id="mask"; omask.style.height=sheight+"px"; //宽度直接用100%在样式里 document.body.appendchild(omask); //创建登录层div并插入body var ologin=document.createelement("div"); ologin.id="login"; ologin.innerhtml="<div class='logincon'><div id='close'></div></div>" document.body.appendchild(ologin); //获取login的宽度和高度并设置偏移值 var dheight=ologin.offsetheight; var dwidth=ologin.offsetwidth; ologin.style.left=(swidth-dwidth)/2+"px"; ologin.style.top=(wheight-dheight)/2+"px"; //获取关闭按钮 var oclose=document.getelementbyid("close"); omask.onclick=oclose.onclick=function(){ document.body.removechild(omask); document.body.removechild(ologin); } } window.onload=function(){ var obtn=document.getelementbyid("btnlogin"); obtn.onclick=function(){ opennew(); } } </script> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持移动技术网!
如对本文有疑问, 点击进行留言回复!!
Android 入门第七讲01-数据存储(数据存储概述,文件存储(raw和asserts目录读写,data/data/包名目录读写,sdcard目录读写),SharedPreferences读写)
vue-axios系列:axios拦截器,配置请求头,配置请求参数
Vuejs 针对 安卓低版本 、ios9.x 不兼容 ES6语法导致失效解决方法
网友评论