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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
js打造数组转json函数
Jan 14 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
vue计算属性及使用详解
Apr 02 Javascript
在Vue项目中使用Typescript的实现
Dec 19 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入门的学习方法
2007/01/02 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
js加强的经典分页实例
2013/03/15 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
iview table高度动态设置方法
2018/03/14 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
小程序转发探索示例
2019/02/19 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
详解python中的异常和文件读写
2021/01/03 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
岗位竞聘演讲稿
2014/01/10 职场文书
我爱我校演讲稿
2014/05/21 职场文书
任命书格式
2014/06/05 职场文书
Flask response响应的具体使用
2021/07/15 Python
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers