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 相关文章推荐
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
JS原型对象通俗"唱法"
Dec 27 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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
Linux编译升级php的详细方法
2013/11/04 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python复制文件的方法实例详解
2015/05/22 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
Python验证码截取识别代码实例
2020/05/16 Python
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
生产车间主管岗位职责
2013/12/28 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js