javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法


Posted in Javascript onMay 13, 2015

本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法。分享给大家供大家参考。具体分析如下:

这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出一个层,页面变灰</title>
<script language="javascript">
function alertWin(title, msg, w, h){ 
 var titleheight = "23px"; // 窗口标题高度 
 var bordercolor = "#336699"; // 提示窗口的边框颜色 
 var titlecolor = "#FFFFFF"; // 窗口标题颜色 
 var titlebgcolor = "#336699"; // 窗口标题背景色
 var bgcolor = "#FFFFFF"; // 提示内容的背景色
 var iWidth = document.documentElement.clientWidth; 
 var iHeight = document.documentElement.clientHeight; 
 var bgObj = document.createElement("div"); 
 bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
 document.body.appendChild(bgObj); 
 var msgObj=document.createElement("div");
 msgObj.style.cssText = "position:absolute;font:11px '宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
 document.body.appendChild(msgObj);
 var table = document.createElement("table");
 msgObj.appendChild(table);
 table.style.cssText = "margin:0px;border:0px;padding:0px;";
 table.cellSpacing = 0;
 var tr = table.insertRow(-1);
 var titleBar = tr.insertCell(-1);
 titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;
 titleBar.style.paddingLeft = "10px";
 titleBar.innerHTML = title;
 var moveX = 0;
 var moveY = 0;
 var moveTop = 0;
 var moveLeft = 0;
 var moveable = false;
 var docMouseMoveEvent = document.onmousemove;
 var docMouseUpEvent = document.onmouseup;
 titleBar.onmousedown = function() {
  var evt = getEvent();
  moveable = true; 
  moveX = evt.clientX;
  moveY = evt.clientY;
  moveTop = parseInt(msgObj.style.top);
  moveLeft = parseInt(msgObj.style.left);  
  document.onmousemove = function() {
   if (moveable) {
    var evt = getEvent();
    var x = moveLeft + evt.clientX - moveX;
    var y = moveTop + evt.clientY - moveY;
    if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) {
     msgObj.style.left = x + "px";
     msgObj.style.top = y + "px";
    }
   } 
  };
  document.onmouseup = function () { 
   if (moveable) { 
    document.onmousemove = docMouseMoveEvent;
    document.onmouseup = docMouseUpEvent;
    moveable = false; 
    moveX = 0;
    moveY = 0;
    moveTop = 0;
    moveLeft = 0;
   } 
  };
 }
 var closeBtn = tr.insertCell(-1);
 closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
 closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";
 closeBtn.onclick = function(){ 
  document.body.removeChild(bgObj); 
  document.body.removeChild(msgObj); 
 } 
 var msgBox = table.insertRow(-1).insertCell(-1);
 msgBox.style.cssText = "font:10pt '宋体';";
 msgBox.colSpan = 2;
 msgBox.innerHTML = msg;
  // 获得Event对象,用于兼容IE和FireFox
  function getEvent() {
   return window.event || arguments.callee.caller.arguments[0];
  }
} 
</script>
</head>
<body>
<input type="button" value="点这里" 
onclick="alertWin('点击弹出可关闭的层窗口,网页变灰',290,208);" />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js换图片效果可进行定时操作
Jun 09 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
vue视图不更新情况详解
May 16 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 #Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 #Javascript
javascript鼠标滑动评分控件完整实例
May 13 #Javascript
javascript实现链接单选效果的方法
May 13 #Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 #Javascript
javascript实现table表格隔行变色的方法
May 13 #Javascript
javascript模拟评分控件实现方法
May 13 #Javascript
You might like
一个显示天气预报的程序
2006/10/09 PHP
我的论坛源代码(九)
2006/10/09 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
详解Python多线程下的list
2020/07/03 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
前台领班岗位职责
2013/12/04 职场文书
总经理助理工作职责
2014/02/06 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
个人欠条范本
2015/07/03 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python