日期:2014-05-16  浏览次数:20365 次

JavaScript模态窗口,支持多浏览器,支持多模态窗口共存,支持局部化的模态,可随意拖动位置,支持自定义样式


///////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////
////Javascript模态窗口/////////////////////////////////////////
////version:2.2////////////////////////////////////////////////
////作者:张恒辉////////////////////////////////////////////////
////email:zhang_7150@sina.com//////////////////////////////////
////修改日期:2009-11-01//////////////////////////////////////
////http://programmerzhh.spaces.live.com///////////////////////
///////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////
////升级历程;
////版本号:v2.2 (2009-11-01)
////1、优化内部结构,使的代码更清晰简洁,属性配置更简单
////2、新增关闭特效,在调用方法close(speed)是,传入窗口关闭时特效持续的时间,则轻松实现特效关闭
////3、新增insert(index,element) 插入元素更方便
////4、支持网页的局部模态化,在调用方法show(parentNode)时,传入父对象,则模态窗口只在该父对象内部显示
////5、支持多模态窗口共存 new modelWindow();产生一个模态窗口,要产生多个窗口 new 多个对象即可
////

///////////////////////////////////////////////////////////////
////使用说明,主要方法和属性说明
///注: 给属性赋值一定要在h.show();之前,否则将看不到效果
///var h = new modelWindow(500, 350, '很漂亮的模态窗口');//实例化模态窗口
///h.show(parentNode);//显示模态窗口
///h.close(speed);//关闭模态窗口
///h.drag(drag)//bool值 设置模态窗口是否可移动
///h.size(width,height)//设置模态窗口的大小
///h.title(value);//设置模态窗口标题,支持element|html|text 三种类型
///h.body(bElement);//向模态窗口的主体部分添加元素(可以是Element| HTML | text)
///h.html(html);//向模态窗口的主体部分插入HTML代码
///h.remove(oElement);//移除模态窗口主体部分的元素
///h.replace(nElement, oElement);//将主体部分的旧元素(oElement) 替换成为 新元素(nElement)
///h.insert(index,element);//向主体部分指定索引(从0开始)出插入元素
///h.append(element);//向主体部分追加元素
///
///控制样式的方法:
///h.border(styleSheet);//边框样式;例:h.border('border:1px solid red')
///h.titleStyle(styleSheet);//控制标题栏样式,例:如上
///h.bodyStyle(styleSheet);//控制标题栏样式,例:如上
///h.bgStyle(styleSheet);//控制背景样式,例:如上
/// 注:以上样式,均做了部分样式属性的保留,如果没有达到预期的效果,则该属性暂时不能修改,我会在以后的版本中加入更多灵活的样式表的支持
////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////
document.write('<style type=\'css/text\'>html,body{height:100%;width:100%}</style>');
//记录当前产生的模态窗口的垂直索引
var m_Zindex = 9999; //该值保证最新产生的模态窗口始终是位于最上边的
////////////////////////////////
/////主调类
///////////////////////////////
function modelWindow(width, height, title) {
////<summary>
/// 主类,用来实例化模态窗口,自 v2.2版本开始 支持网页局部模态化
/// </summary>
///<param name='width' type='int'>
///模态窗口宽度
///</param>
///<param name='height' type='int'>
///模态窗口高度
///</param>
///<param name='height' type='int'>
///模态窗口标题
///</param>
var n = navigator.userAgent.toLowerCase();
var browser = this.browser = {
msie: /msie/.test(n) && !/opera/.test(n), //IE浏览器
mozilla: /mozilla/.test(n) && !/(compatible|webkit)/.test(n), //火狐浏览器
opera: /opera/.test(n)//Opera浏览器
};
//匹配单位
var d = this.d = /\d+|\d+[em|ex|px|pt|pc|in|cm|mm]/;
var d1 = this.d1 = /[em|ex|px|pt|pc|in|cm|mm]+\;/;
var d2 = this.d2 = /[em|ex|px|pt|pc|in|cm|mm]/;
var D = this.D = /\D+\:/;
var h = this.H = /<(.*)>.*<\/\1>|<(.*)\/>/; //匹配HTML标记

width = width ? this.d2.test(width) ? width : width + 'px' : 350 + 'px';
height = height ? this.d2.test(height) ? height : height + 'px' : 180 + 'px';
title = title ? title : '提示信息';

//样式表
var ss = { bgWidth: 'width:' + document.body.scrollWidth + 'px;', //背景宽
bgHeight: 'height:' + document.body.scrollHeight + 'px;', //背景高
bgLeft: 'left:0px;', //背景左边距
bgTop: 'top:0px;',