弹出层 效果-弹出窗-纯js
2016-04-08 00:00
399 查看
摘要: 弹出层、弹出窗、js漂亮弹出层代码、JS 弹出层 定位至屏幕居中、纯JS遮罩层-弹出框
//本文来源于网络,本人总结起来并优化,分享给有需要的前端朋友,如有侵权,请联系删除,也请指正、批评
html <!--<div class="loginCon"> <div id="close">点击关闭</div> </div>--> css #close{ background:url(img/close.png) no-repeat; width:30px; height:30px; cursor:pointer; position:absolute; right:5px; top:15px; text-indent:-999em; } #mask{ background-color:#ccc; opacity:0.5; filter: alpha(opacity=50); position:absolute; left:0; top:0; z-index:1000; } #login{ position:fixed; z-index:1001; } .loginCon{ position:relative; width:670px; height:380px; background:url(img/loginBg.png) #2A2C2E center center no-repeat; } js <script> function openNew(){//简单封装好的函数 //获取页面的宽度和高度 var sWidth=document.body.scrollWidth; var sHeight=document.body.scrollHeight; //获取可视区域的宽度和高度,如果是竖屏显示,那么宽度和高度是一样的 var wHeight=document.documentElement.clientHeight; //创建遮罩 var oMask=document.createElement("div"); oMask.id="mask"; //给他样式赋值 oMask.style.width=sWidth+"px"; oMask.style.height=sHeight+"px"; document.body.appendChild(oMask);//最后面追加进来,不然不显示,还停留在js代码里面 var oLogin=document.createElement("div"); oLogin.id="login"; //给他的样式赋值 oLogin.innerHTML="<div class='loginCon'><div id='close'>点击关闭</div></div>"; document.body.appendChild(oLogin); //获取登录框的宽度和高度 var dWidth=oLogin.offsetWidth; var dHeight=oLogin.offsetHeight; //获取登录框的left和top 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(); return false } } </script>
//本文来源于网络,本人总结起来并优化,分享给有需要的前端朋友,如有侵权,请联系删除,也请指正、批评
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js数组实现图片轮播
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 爆炸式的JS圆形浮动菜单特效代码
- AJAX简单应用实例-弹出层
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- Jquery弹出层插件ThickBox的使用方法
- node.js抓取并分析网页内容有无特殊内容的js文件