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的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
微信小程序canvas动态时钟
Oct 22 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 显示指定路径下的图片
2009/10/29 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
浅析php原型模式
2014/11/25 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
使用python实现接口的方法
2017/07/07 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python编程羊车门问题代码示例
2017/10/25 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
超市5.1促销活动
2014/01/15 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
售房协议书范本2014
2014/10/23 职场文书
患者身份识别制度
2015/08/06 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android