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为搜索栏增加tag提示
Jun 22 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
Js类的构建与继承案例详解
Sep 15 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 实现身份验证代码
2010/03/24 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
Sea.JS知识总结
2016/05/05 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
django缓存配置的几种方法详解
2018/07/16 Python
详解python Todo清单实战
2018/11/01 Python
python图像处理入门(一)
2019/04/04 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
如何在django中添加日志功能
2020/02/06 Python
parser.add_argument中的action使用
2020/04/20 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
《陈涉世家》教学反思
2014/04/12 职场文书
论群众路线学习笔记
2014/11/06 职场文书
外科护士长工作总结
2015/08/12 职场文书
小学美术教学反思
2016/02/17 职场文书