javascript实现一个简单的弹出窗


Posted in Javascript onFebruary 22, 2016

功能介绍:点击一个按钮,然后页面会弹出一个窗口,而页面原来的内容会保持不变,只是在其页面上加了一个遮罩层,设置了不透明度,弹出的窗口可设置在固定位置,也可以自由设定,常见于网站的登录按钮。

html页面:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现一个弹出框</title>
<style type="text/css">
/*预先写好弹出窗的样式*/
#menu{height: 900px;}
#close{ 
  width:30px; 
  height:30px; 
  cursor:pointer; 
  position:absolute; 
  right:5px; 
  top:5px; 
  text-indent:-999em;
  background-color:blue;
  }
#mask{ 
  background-color:pink;
  opacity:0.5;
  filter: alpha(opacity=50); 
  position:absolute; 
  left:0;
  top:0;
  z-index:1;
  }
#login{ 
  position:fixed;
  z-index:2;
  }
.loginCon{ 
  position:relative; 
  width:670px;
  height:380px;
  /*background:url(img/loginBg.png) #2A2C2E center center no-repeat;*/
  background-color: #ccc;
  }
</style>

</head>
<body>
<div id="menu">
  <div id="login-area">
   <button id="btnLogin">登录</button>
  </div>
</div>
</body>
</html>

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.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 dHeight=oLogin.offsetHeight;
  var dWidth=oLogin.offsetWidth;
    //设置登陆框的left和top
    oLogin.style.left=sWidth/2-dWidth/2+"px";
    oLogin.style.top=wHeight/2-dHeight/2+"px";
  //点击关闭按钮
  var oClose=document.getElementById("close");
  
    //点击登陆框以外的区域也可以关闭登陆框
    oClose.onclick=oMask.onclick=function(){
          document.body.removeChild(oLogin);
          document.body.removeChild(oMask);
          };
          };
          
  window.onload=function(){
      var oBtn=document.getElementById("btnLogin");
        //点击登录按钮
        oBtn.onclick=function(){
          openNew();
          return false;
          }
        
    }
</script>
Javascript 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
express启用https使用小记
May 21 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
vue实现百度搜索功能
Dec 28 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
Js的Array数组对象详解
Feb 22 #Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 #Javascript
JS字符串的切分用法实例
Feb 22 #Javascript
JS实现上下左右对称的九九乘法表
Feb 22 #Javascript
基于Javascript实现倒计时功能
Feb 22 #Javascript
TypeOf这些知识点你了解吗
Feb 21 #Javascript
详谈javascript异步编程
Feb 21 #Javascript
You might like
PHP 危险函数解释 分析
2009/04/22 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP实现简易计算器功能
2020/08/28 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
js数据类型检测总结
2018/08/05 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
幼儿园家长评语
2014/02/10 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL