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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
微信小程序用户授权最佳实践指南
May 08 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+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
python动态加载包的方法小结
2016/04/18 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
四风问题个人对照检查剖析材料
2014/09/27 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
毕业生见习报告总结
2014/11/08 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
话题作文之呼唤
2019/12/18 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python