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 生成指定范围数值随机数
Jan 09 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
javascript用函数实现对象的方法
May 14 Javascript
javascript基础知识
Jun 07 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
node.js中express-session配置项详解
May 31 Javascript
Angular 数据请求的实现方法
May 07 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
用vite搭建vue3应用的实现方法
Feb 22 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
解决cPanel无法安装php5.2.17
2014/06/22 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
django框架两个使用模板实例
2019/12/11 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
用python制作个视频下载器
2021/02/01 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
个人收入证明范本
2014/01/12 职场文书
学生感冒英文请假条
2014/02/04 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
婚前协议书标准版
2014/10/19 职场文书
班主任寄语2015
2015/02/26 职场文书
暂住证明怎么写
2015/06/19 职场文书