随笔 - 317, 文章 - 0, 评论 - 453, 阅读 - 114万
  博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

JS 弹出层

Posted on   PHP-张工  阅读(12642)  评论(2编辑  收藏  举报

弹出层测试


一个简单的JS弹出层

基本功能

//主函数 id:内容,strTitle:标题,fn_msgBoxBack:关闭时回调函数,notShowClose:是否隐藏关闭按钮
function msgBox(id, strTitle, fn_msgBoxBack, hideClose)

//主函数 id:内容ID,strTitle:标题,fn_msgBoxBack:关闭时回调函数,notShowClose:是否隐藏关闭按钮

msgBox(id, strTitle, fn_msgBoxBack, hideClose)

msgBox_close() 关闭对话框

msgBox_alert(strAlert, strTitle) 提示框

msgBox_loading(strAlert, strTitle) 加载中

快捷键ESC关闭对话框

兼容 IE、FireFox、Chrome

主要遇到的问题

取父节点应当使用 div.parentNode;

取鼠标位置

 

1
2
3
4
5
6
onmousedown="msgBox_moveStart(event);"
function msgBox_moveStart(evt){
  evt = evt ? evt : (window.event ? window.event : null);
  msgBox_mouseX = evt.clientX;
  msgBox_mouseY = evt.clientY;
}

 

style.left、style.top、style.width、style.height 附值时,应当加上 px

div.style.left = left + 'px';

添加事件

 

1
2
3
4
5
if(isIE){
  document.attachEvent('onmousemove', msgBox_move);
}else{
  document.addEventListener('mousemove', msgBox_move,false);
}

 

获取页面总宽度(包含非可见区域)document.documentElement.scrollWidth

透明度

 

1
2
3
4
5
6
7
if(isIE){
  div.style.filter = 'Alpha(opacity=20)';
}else if(navigator.userAgent.indexOf("Chrome") > -1) //判断是否Chrome{
  div.style.opacity = 0.2;
}else{
  div.style.MozOpacity = 0.2;
}

 

实例及源码 下载

 


编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
点击右上角即可分享
微信分享提示