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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
js简易版购物车功能
Jun 17 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
vue配置多代理服务接口地址操作
Sep 08 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/09/08 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
最基础的Python的socket编程入门教程
2015/04/23 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
python多进程实现进程间通信实例
2017/11/24 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
python同时替换多个字符串方法示例
2019/09/17 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
英语专业毕业个人求职自荐信
2013/09/21 职场文书
个人校本研修方案
2014/05/26 职场文书
收款委托书
2014/10/14 职场文书
考试作弊检讨书
2014/10/21 职场文书
中小企业员工手册范本
2015/05/14 职场文书
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android