JavaScript写的一个DIV 弹出网页对话框


Posted in Javascript onAugust 14, 2009

网上搜索到的代码,做了一些修改该,
修正无法自定义颜色,修正IE8 下错误,以及其他小BUG 兼容IE6~8以及火狐
可以自定义
// 提示窗口标题高度
// 提示窗口的边框颜色
// 提示窗口的标题颜色
// 提示窗口的标题背景色
// 提示内容的背景色
// 提示内容文字对齐方式
功能 可以弹出一个大DIV遮住页面(IE下 透明) 然后在屏幕中央显示显示一个小DIV
可用作功能提示 操作提示 以及公告等
提示内容可以使带HTML标记的文字,也可是一个页面链接

function MessageBox() 
{ 
this.titleheight = "21"; // 提示窗口标题高度 
this.bordercolor = "#666699"; // 提示窗口的边框颜色 
this.titlecolor = "#1259a4"; // 提示窗口的标题颜色 
this.titlebgcolor = "#e4f1fb"; // 提示窗口的标题背景色 
this.bgcolor = "#FFFFFF"; // 提示内容的背景色 
this.MsgAlign="left"; this.Show=function(title, msg, framesrc, w, h) 
{ 
var iWidth = document.documentElement.clientWidth; 
var iHeight = document.documentElement.clientHeight+document.documentElement.scrollTop*2; 
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 "+this.bordercolor+";background-color:"+this.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:"+(w-84)+"px;height:"+this.titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+this.titlecolor+";cursor:move;background-color:" + this.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:" + this.titlebgcolor; 
closeBtn.innerHTML = "<span style="font-size:10pt;color:"+this.titlecolor+";" style="font-size:10pt;color:"+this.titlecolor+";" id='closeBtn'>×关闭窗口"; 
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; 
if(framesrc != "") 
{ 
msg = "<iframe name='frmAlertWin' id='frmAlertWin' src="about:blank" src="about:blank" frameborder=0 marginwidth=0 marginheight=0 style='height:"+(h-this.titleheight-10)+"px;width:100%;'></iframe>"; 
} 
msgBox.innerHTML = "<div style="\" style="\""text-align:"+this.MsgAlign+";\">"+msg+"</div>"; 
if(document.getElementById("frmAlertWin") != null) 
{ 
document.getElementById("frmAlertWin").src = framesrc; 
} 

function getEvent(){ 
return window.event || arguments.callee.caller.arguments[0]; 
} 
} 
}

调用方式
var msgbox=new MessageBox();
msgbox.Show('站内公告',"小小提示","",500,220);///参数:标题,内容(提示为连接页面时可为空),连接页面地址(使用文字是可为空),宽度,高度
要注意的是如果在页面加载时就要弹出提示 请将调用代码放在body标记以后 否则在IE8下回出现错误
Javascript 相关文章推荐
JQuery表格内容过滤的实现方法
Jul 05 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
javascript arguments使用示例
Dec 16 Javascript
jquery移动节点实例
Jan 14 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 #Javascript
img标签中onerror用法
Aug 13 #Javascript
什么是JavaScript
Aug 13 #Javascript
Javascript Global对象
Aug 13 #Javascript
Javascript Math对象
Aug 13 #Javascript
Javascript 作用域使用说明
Aug 13 #Javascript
Javascript 继承机制实例
Aug 12 #Javascript
You might like
PHP写MySQL数据 实现代码
2009/06/15 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
一个简单的php路由类
2016/05/29 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
执行力心得体会
2013/12/31 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
《中华少年》教学反思
2014/02/15 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
python神经网络ResNet50模型
2022/05/06 Python