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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
vue+iview分页组件的封装
Nov 17 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实现scws中文分词搜索的方法
2015/12/25 PHP
php组合排序简单实现方法
2016/10/15 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
简单理解Python中的装饰器
2015/07/31 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
消防宣传口号
2014/06/16 职场文书
接待员岗位职责
2015/02/13 职场文书
安全第一课观后感
2015/06/18 职场文书
运动会800米赞词
2015/07/22 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers