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 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
Vue如何实现组件间通信
May 15 Vue.js
使用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操作数组相关函数
2011/02/03 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
js计数器代码
2006/11/04 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
在Python中操作字典之clear()方法的使用
2015/05/21 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python常见异常分类与处理方法
2017/06/04 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
python -v 报错问题的解决方法
2020/09/15 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
亿企通软件测试面试题
2012/04/10 面试题
团支部建设方案
2014/05/02 职场文书
社会发展项目建议书
2014/08/25 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python