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 相关文章推荐
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
单元选择合并变色示例代码
May 26 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
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部分常见问题总结
2008/03/27 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
Python写的服务监控程序实例
2015/01/31 Python
浅谈Python处理PDF的方法
2017/11/10 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
建筑施工实习自我鉴定
2013/09/19 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
环保建议书
2014/03/12 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
党员转正介绍人意见
2015/06/03 职场文书
小组组名及励志口号
2015/12/24 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技