JS关闭窗口时产生的事件及用法示例


Posted in Javascript onAugust 20, 2016

本文实例讲述了JS关闭窗口时产生的事件及用法。分享给大家供大家参考,具体如下:

/************ 关闭窗口,提交评价 **************/
window.onbeforeunload = function(){
   var pageWidth = Math.max(window.top.document.body.scrollWidth, window.top.document.documentElement.scrollWidth);
   var pageHeight = Math.max(window.top.document.body.scrollHeight, window.top.document.documentElement.scrollHeight);
   var cltHeight = Math.max(window.top.document.body.clientHeight, window.top.document.documentElement.clientHeight);
   var width = 400 ;
   var height = 200 ;
   var layer = window.top.document.getElementById("zz_layer");
   if (layer != null) {
   layer.parentNode.removeChild(layer);
   }
   // 遮罩层
 var layer= window.top.document.createElement("div");
 layer.id = "zz_layer";
 layer.style.filter = "alpha(opacity=38)";//ie
 layer.style.opacity = "0.38";//ff
 layer.style.width = pageWidth + "px";
 layer.style.height = pageHeight + "px";
 layer.style.position= "absolute";
 layer.style.top = 0;
 layer.style.left = 0;
 layer.style.backgroundColor = "#000";
 layer.style.zIndex = "9998";
 window.top.document.body.appendChild(layer);
 // 评价窗口
 var newbox = document.getElementById("KF_PJ_DIV");
 newbox.style.zIndex = "9999";
 newbox.style.display = "block";
 newbox.style.width = width + "px";
 newbox.style.height = height + "px";
 newbox.style.border = "#565656 4px solid";
 newbox.style.background = "#FFFFFF";
 newbox.style.position = "absolute";
 newbox.style.left = pageWidth/2 + "px";
 newbox.style.top = (cltHeight/2) + "px";
 if(height/2 > (cltHeight/2)){
  newbox.style.marginTop = ( - (cltHeight/2)) + "px";
 }else{
  newbox.style.marginTop = ( - height/2) + "px";
 }
 if(width/2 > (pageWidth/2)){
  newbox.style.marginLeft = ( - (pageWidth/2)) + "px";
 }else{
  newbox.style.marginLeft = ( - width/2) + "px";
 }
   return "您尚未对客服服务作出评价,请点击‘取消'评分!";
  };
  function mydiv_resize(){
  var pageWidth = Math.max(window.top.document.body.scrollWidth, window.top.document.documentElement.scrollWidth);
   var pageHeight = Math.max(window.top.document.body.scrollHeight, window.top.document.documentElement.scrollHeight);
   var cltHeight = Math.max(window.top.document.body.clientHeight, window.top.document.documentElement.clientHeight);
   var cltWidth = Math.max(window.top.document.body.clientWidth, window.top.document.documentElement.clientWidth);
   var width = 400 ;
   var height = 200 ;
  var layer = window.top.document.getElementById("zz_layer");
   if (layer != null) {
   // 遮罩层
  layer.style.width = pageWidth + "px";
  layer.style.height = pageHeight + "px";
   }
 // 评价窗口
 var newbox = document.getElementById("KF_PJ_DIV");
 newbox.style.left = cltWidth/2 + "px";
 newbox.style.top = (cltHeight/2) + "px";
 if(height/2 > (cltHeight/2)){
  newbox.style.marginTop = ( - (cltHeight/2)) + "px";
 }else{
  newbox.style.marginTop = ( - height/2) + "px";
 }
 if(width/2 > (pageWidth/2)){
  newbox.style.marginLeft = ( - (pageWidth/2)) + "px";
 }else{
  newbox.style.marginLeft = ( - width/2) + "px";
 }
}
window.onresize = mydiv_resize;

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

Javascript 相关文章推荐
jQuery 常见学习网站与参考书
Nov 09 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
在Mac下彻底卸载node和npm的方法
May 16 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
JS实现漂亮的时间选择框效果
Aug 20 #Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 #Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 #Javascript
浅谈angular懒加载的一些坑
Aug 20 #Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 #Javascript
js显示动态时间的方法详解
Aug 20 #Javascript
javascript数字验证的实例代码(推荐)
Aug 20 #Javascript
You might like
谈谈PHP语法(5)
2006/10/09 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
bootstrap中的 form表单属性role="form"的作用详解
2017/01/20 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
功能完善的小程序日历组件的实现
2020/03/31 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
详解Django中Request对象的相关用法
2015/07/17 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
tensorflow多维张量计算实例
2020/02/11 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
党员干部承诺书范文
2014/03/25 职场文书
电子商务求职信
2014/06/15 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
亮剑精神观后感
2015/06/05 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python