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绑定事件(bind和live的区别介绍)
Aug 23 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
Vue CLI3中使用compass normalize的方法
May 30 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
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
python 检查是否为中文字符串的方法
2018/12/28 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
python将音频进行变速的操作方法
2020/04/08 Python
python爬取音频下载的示例代码
2020/10/19 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
后备干部考察材料
2014/02/12 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
小学数学课后反思
2014/04/23 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
年会邀请函范文
2015/01/30 职场文书
预备党员自我评价范文
2015/03/04 职场文书
尼克胡哲观后感
2015/06/08 职场文书
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python