- 浏览: 71909 次
- 性别:
- 来自: 西安
文章分类
最新评论
-
michelle0620:
是我这显示问题吗?怎么看不了全部
模似下拉列表框 -
ylcat:
哥们给个demo啊
JavaScript模态窗口,支持多浏览器,支持多模态窗口共存,支持局部化的模态,可随意拖动位置,支持自定义样式
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;', //背景上边距
mHeight: 'height:' + height + ';', //模态窗口高
mWidth: 'width:' + width + ';', //模态窗口宽
tHeight: 'height:30px;line-height:30px;' //标题高
};
var opacity = .5; //半透明度
//样式表
var style = this.style = {
width: { bgWidth: ss['bgWidth'], mWidth: ss['mWidth'] }, //
height: { bgHeight: ss['bgHeight'], mHeight: ss['mHeight'], tHeight: ss['tHeight'] },
border: { mBorder: 'border:1px solid #b5d0d9;', bBorder: 'border-top:1px solid #b5d0d9' },
background: { bgBackground: 'background-color:#094579;', tBackground: 'background-color:#EEF2FB;', mBackground: 'background-color:#ffffff;', bBackground: 'background-color:#ffffff;' },
font: { bFontSize: 'font-size:9pt;', bFontFamily: 'font-family:Alpha,Georgia,"宋体", "Times New Roman", Times, serif;', bColor: 'color:#474747;', tFontSize: 'font-size:11pt;', tFontFamily: 'font-family:Alpha,Georgia,"宋体", "Times New Roman", Times, serif;', tColor: 'color:#1d2d40;', cFontSize: 'font-size:20px;', cColor: 'color:#808080;' },
lineHeight: { mLineHeight: ss['tHeight'], bLineHeight: 'line-height:22px;' },
margin: { mMargin: 'margin:auto;', bMargin: 'margin:0px;', tMargin: 'margin:1px;', cMargin: 'margin-right:10px;' },
padding: { mPadding: 'padding:0px;', bPadding: 'padding:10px;' },
position: { absolute: 'position:absolute;', relative: 'position:relative;', static: 'position:static;' },
top: { bgTop: ss['bgTop'], mTop: 'top:' + (parseFloat(ss['bgTop'].replace(D, '').replace(d1, '')) + (parseFloat(ss['bgHeight'].replace(D, '').replace(d1, '')) - parseFloat(ss['mHeight'].replace(D, '').replace(d1, ''))) / 2) + 'px;' },
left: { bgLeft: ss['bgLeft'], mLeft: 'left:' + (parseFloat(ss['bgLeft'].replace(D, '').replace(d1, '')) + (parseFloat(ss['bgWidth'].replace(D, '').replace(d1, '')) - parseFloat(ss['mWidth'].replace(D, '').replace(d1, ''))) / 2) + 'px;' },
opacity: { bgOpacity: 'opacity:' + opacity + ';' + '-moz-opacity:' + opacity + ';' + 'filter:Alpha(opacity=' + opacity * 100 + ');' + '-ms-filter: \'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity + ')\';',
mOpacity: 'opacity:1;' + '-moz-opacity:1;' + 'filter:Alpha(opacity=100);' + '-ms-filter: \'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\';'
},
zIndex: { bgZIndex: 'z-index:' + m_Zindex + ';', mZIndex: 'z-index:' + (m_Zindex + 1) + ';' },
textAlign: { center: 'text-align:center;' },
float: { right: 'float:right;' },
cursor: { pointer: 'cursor:pointer;', auto: 'cursor:auto;' },
overflow: { overflowAll: 'overflow:auto;', bOverflowY: 'overflow-y:auto;' }
};
m_Zindex++;
//背景
var bg = this.bg = new bg();
//模态窗口
var m = this.m = new m();
//主体
var b = this.b = new b();
//标题框
var t = this.t = new t();
//透明层
var trans = this.trans = this.m.parentNode;
/////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////
//背景
/////////////////////////
function bg() {
var s;
s = [['width', 'bgWidth'], ['height', 'bgHeight'], ['left', 'bgLeft'], ['top', 'bgTop'], ['position', 'absolute'], ['background', 'bgBackground'], ['opacity', 'bgOpacity'], ['zIndex', 'bgZIndex']];
return createElment(null, s, 'div');
}
///////////////////////////
//模态窗口
/////////////////////////
function m() {
var s;
s = [['width', 'mWidth'], ['height', 'mHeight'], ['left', 'mLeft'], ['top', 'mTop'], ['position', 'absolute'], ['background', 'mBackground'], ['opacity', 'mOpacity'], ['zIndex', 'mZIndex'], ['border', 'mBorder']];
return createElment(null, s, 'div');
}
///////////////////////////
//主体
/////////////////////////
function b() {
var s;
s = [['background', 'bBackground'], ['margin', 'bMargin'], ['lineHeight', 'bLineHeight'], ['padding', 'bPadding'], ['font', 'bFontSize'], ['font', 'bFontFamily'], ['font', 'bColor'], ['border', 'bBorder']];
return createElment(null, s, 'div');
}
///////////////////////////
//标题框
/////////////////////////
function t() {
var s;
s = [['height', 'tHeight'], ['background', 'tBackground'], ['font', 'tFontSize'], ['font', 'tFontFamily'], ['font', 'tColor'], ['margin', 'tMargin'], ['textAlign', 'center']];
var tT = createElment(null, s, 'div');
var tS = createElment(null, null, 'span');
s = [['height', 'tHeight'], ['font', 'cFontSize'], ['font', 'cColor'], ['float', 'right'], ['margin', 'cMargin'], ['cursor', 'pointer']];
var tC = createElment(null, s, 'div');
if (browser.mozilla) { tS.textContent = title; tC.textContent = '×' }
else { tS.innerText = title; tC.innerText = '×' }
tC.setAttribute('title', '关闭');
tT.appendChild(tC); tT.appendChild(tS);
tC.onmouseover = function() { this.style.color = 'red'; }
tC.onmouseout = function() { this.style.color = '#808080'; }
tC.onclick = function() { _close(bg); _close(m); };
return tT;
}
///////////////////////////
//关闭模态窗口
/////////////////////////
//function close() { alert('关闭方法尚未实现')}
//////////////////
/////////////
/////创建Element对象
/////////////
/////////////////
function createElment(id, s, nodeTypeName) {
var node = document.createElement(nodeTypeName);
if (id) { node.setAttribute('id', id) }
var S = '';
if (s) {
for (i = 0; i < s.length; i++) {
S += style[s[i][0]][s[i][1]];
}
if (browser.msie) {
node.style.cssText = S;
} else {
node.setAttribute('style', S);
}
}
return node;
}
/////////////////////////////////////////
/////////////给对象添加子对象
////////////////////////////////////////
this.inChild = function(parentNode, value, type) {
///////<param name='type' type='bool'>
///////标志,如果传入的是对象,是否清空父对象,再进行插入(默认不清空)
/////////////如果是HTML代码,是否自动进行转译(默认自动转译)
///////</param>
if (parentNode && value) {
if (typeof value == 'string') {
//如果传入的值是HTML代码
if (this.H.test(value) && !type)
parentNode.innerHTML = value;
else {
if (this.browser.mozilla)
parentNode.textContent = value;
else
parentNode.innerText = value;
}
} else {
if (type) this.removeChild(parentNode);
parentNode.appendChild(value);
}
}
return parentNode;
}
////////////////////////////////////////////
////////////////////移除子元素
///////////////////////////////////////////
this.removeChild = function(parentNode, childNode) {
///////<param name='childNode' type='element'>
///////如果子对象没有参数,则默认移除所有子元素
///////</param>
if (parentNode && parentNode.hasChildNodes()) {
if (!childNode) {
while (parentNode.hasChildNodes())
parentNode.removeChild(parentNode.childNodes[0]);
} else
parentNode.removeChild(childNode);
}
return parentNode;
}
/////////////////////////////////////////////////
/////////////////////////计算模态窗口显示的坐标
////////////////////////////////////////////////
this.culPosition = function() {
var bgH = parseFloat(this.bg.style.height.replace(this.d2, ''));
var bgW = parseFloat(this.bg.style.width.replace(this.d2, ''));
var bgL = parseFloat(this.bg.style.left.replace(this.d2, ''));
var bgT = parseFloat(this.bg.style.top.replace(this.d2, ''));
var mH = parseFloat(this.m.style.height.replace(this.d2, ''));
var mW = parseFloat(this.m.style.width.replace(this.d2, ''));
var left = bgL + (bgW - mW) / 2 + 'px';
var top = bgT + (bgH - mH) / 2 + 'px';
this.m.style.left = left;
this.m.style.top = top;
return { left: left, top: top };
}
//移动窗口
this.M = function(M) {
//记录当前的拖拽元素
var dragElement = null;
//4个全局变量,用来记录当前拖拽元素以及鼠标的坐标
//由于不可能同时拖拽多个元素,所以不会冲突
var mouseY, mouseX, objY, objX;
//用于动态更新z-index,确保不会造成不该移动的元素瞎动。
var max = 1;
//获得元素的坐标
function getNodeStyle(node, styleName) {
var realStyle = null;
if (node.currentStyle) {
realStyle = node.currentStyle[styleName];
} else if (window.getComputedStyle) {
realStyle = window.getComputedStyle(node, null)[styleName];
}
return realStyle;
}
function over() {
M.style.cursor = 'move';
}
M.parentNode.style.position = 'absolute';
//鼠标按下响应事件
M.onmousedown = function(event) {
event = event || window.event;
//按谁拽谁
dragElement = this.parentNode;
//记录鼠标的当前坐标
mouseX = parseInt(event.clientX)
+ (document.documentElement.scrollLeft || document.body.scrollLeft);
mouseY = parseInt(event.clientY)
+ (document.documentElement.scrollTop || document.body.scrollTop);
//记录元素的当前坐标
objY = parseInt(getNodeStyle(dragElement, "top"));
objX = parseInt(getNodeStyle(dragElement, "left"));
//IE不返回未设置的CSS属性
if (!objY) objY = 0;
if (!objX) objX = 0;
this.style.zIndex = max++;
over();
};
M.onmousemove = function(event) {
event = event || window.event;
if (dragElement) {
var x, y;
//y等于鼠标当前y - 记录的鼠标y + 元素y ,后面的x一样
y = parseInt(event.clientY)
+ (document.documentElement.scrollTop || document.body.scrollTop)
- mouseY + objY;
x = parseInt(event.clientX)
+ (document.documentElement.scrollLeft || document.body.scrollLeft)
- mouseX + objX;
//更新元素的实际显示
dragElement.style.top = y + "px";
dragElement.style.left = x + "px";
//更新鼠标坐标和元素坐标的记录
objY = y;
objX = x;
mouseX = parseInt(event.clientX)
+ (document.documentElement.scrollLeft || document.body.scrollLeft);
mouseY = parseInt(event.clientY) + (
document.documentElement.scrollTop || document.body.scrollTop);
}
over();
};
M.onmouseup = function() {
//停止拖拽
dragElement = null;
M.style.cursor = 'auto';
};
}
}
//////属性
modelWindow.prototype = {
show: function(parentNode) {
////<summary>
/// 显示模态窗口,支持网页局部的模态化
/// </summary>
///////<param name='parentNode' type='element'>
///////模态窗口的父对象,默认载入document.body
///////注:如果该对象不为空,最好给定height和width属性值
///////</param>
var P = !parentNode ? document.body : parentNode;
if (parentNode) {
var width = P.style.width ? P.style.width.replace(/\D+/, '') : 500;
var height = P.style.height ? P.style.height.replace(/\D+/, '') : 400;
this.bg.style.width = width + 'px';
this.bg.style.height = height + 'px';
this.culPosition();
this.bg.style.width = '100%';
this.bg.style.height = '100%';
var pst = P.style.position;
P.style.position = !pst ? 'relative' : pst.indexOf('relative') >= 0 || pst.indexOf('absolute') >= 0 ? pst : 'relative';
P.style.overflow = 'hidden';
}
this.m.appendChild(this.t);
this.m.appendChild(this.b);
P.appendChild(this.m);
P.appendChild(this.bg);
this.M(this.t);
},
close: function(speed) {
////<summary>
/// 关闭模态窗口,支持动画效果
/// </summary>
///////<param name='speed' type='String'>
////////关闭模态窗口的动画效果:
//////// slow:用1秒时间将窗口淡出
//////// fast:用0.1秒将狂口淡出
//////// normal:默认用0.5秒将窗口淡出
//////// 支持用户自定义的时间,单位:毫秒
//////// 该参数如果未指定,默认没有动画效果
///////</param>
var b_g = this.bg;
if (!speed) {
_close(this.bg);
_close(this.m);
} else {
__close(this.m, speed);
}
//////动画效果
function __close(element, speed) {
if (!element) return false;
var T = /['fast','slow','normal']/;
var S = { fast: 100, slow: 1000, normal: 500 };
speed = isNaN(speed) ? (S[speed] || S['normal']) : speed;
var s = element.style.filter;
var s1 = element.style.opacity;
var start = s1 * 100 || parseFloat(s.substring(s.indexOf('opacity=') + 8, s.indexOf(')')) || 100);
var op = start;
var step = 20;
function turn() {
if (s) {
element.style.filter = 'Alpha(opacity=' + op + ')';
} else if (s1) {
element.style.opacity = op / 100;
}
op -= start / step;
if (op <= -start / step) {
clearInterval(timer);
element.parentNode.removeChild(element);
b_g.parentNode.removeChild(b_g);
}
}
var timer = setInterval(turn, speed / step);
}
},
size: function(width, height) {
////<summary>
/// 获取或设置模态窗口的大小
/// </summary>
///<param name='width' type='int|string'>
///窗口宽度
///</param>
///<param name='height' type='int|string'>
///窗口高度
///</param>
///<return type='{}'>
///return { width: width, height: height };
///</return>
var ow = this.m.style.width; //原始宽度
var oh = this.m.style.height; //原始高度
if (width) {
width = this.d.test(width) ? width : ow;
this.m.style.width = width;
}
if (height) {
height = this.d.test(height) ? height : oh;
this.m.style.height = height;
}
//this.culPosition(); //重新计算位置
return { width: width, height: height };
},
title: function(value) {
////<summary>
/// 获取或设置模态窗口的标题
/// </summary>
///<param name='value' type='string|element|html'>
/// 标题内容
///</param>
///<return type='String'>
///返回标题文本
///</return>
var r = this.inChild(this.t.childNodes[1], value, true);
return r.innerText || r.textContent;
},
body: function(element) {
////<summary>
/// 获取或设置模态窗口主体对象中的内容
/// </summary>
///<param name='element' type='string|element|html'>
/// 主体内容
///</param>
///<return type='element'>
///返回主体对象
///</return>
return this.inChild(this.b, element, true);
},
html: function(html) {
////<summary>
/// 获取或设置模态窗口主体对象中的内容
/// </summary>
///<param name='html' type='html'>
/// 主体内容
///</param>
///<return type='html'>
///返回主体对象的html代码
///</return>
if (this.H.test(html))
this.inChild(this.b, html);
return html || this.b.innerHTML;
},
text: function(text) {
////<summary>
/// 获取或设置模态窗口主体对象中的内容
/// </summary>
///<param name='text' type='String'>
/// 主体内容
///</param>
///<return type='String'>
///返回主体对象中的文本
///</return>
if (text && typeof text == 'string')
this.inChild(this.b, text, true);
return this.b.innerText || this.b.textContent;
},
append: function(element) {
////<summary>
/// 向模态窗口主体对象中追加子对象
/// </summary>
///<param name='element' type='element'>
/// 要追加的子对象
///</param>
///<return type='bool'>
///返回Boolean类型的值(true:追加成功,false:失败)
///</return>
if (element && typeof element == 'object')
{ var r = this.inChild(this.b, element); if (r) return true; }
return false;
},
//新方法
insert: function(index, element) {
////<summary>
/// 2.2新增方法,向主体中的指定位置插入元素(索引从0开始)
///默认追加到最后一个元素之后
/// </summary>
///<param name='index' type='int'>
/// 索引
///</param>
///<param name='element' type='element'>
/// 要插入的子对象
///</param>
///<return type='bool'>
///返回Boolean类型的值(true:插入成功,false:失败)
///</return>
if (!element) return;
index = parseInt(index) || this.b.childNodes.length;
index = index < 0 ? 0 : index;
var r;
if (index > this.b.childNodes.length - 1)
r = this.b.appendChild(element);
else
r = this.b.insertBefore(element, this.b.childNodes[index]);
return r ? true : false;
},
replace: function(nElement, oElement) {
////<summary>
/// 从主体替换某个对象
/// </summary>
///<param name='nElement' type='Element'>
///新对象
///</param>
///<param name='oElement' type='Element'>
///即将要被替换掉的旧对象
///</param>
///<return type='parentElement'>
///返回替换后的父对象
///</return>
if (nElement && oElement)
this.b.replaceChild(nElement, oElement);
return this.b;
},
remove: function(oElement) {
////<summary>
/// 从主体移除某个对象
/// </summary>
///<param name='oElement' type='Element'>
///即将要被移除掉的旧对象
///</param>
///<return type='parentElement'>
///返回移除后的父对象
///</return>
return this.removeChild(this.b, oElement);
},
drag: function(drag) {
////<summary>
/// 设置模态窗口是否可移动
/// </summary>
///<param name='drag' type='bool'>
///是否可移动
///</param>
///<return type='undefined'>
///无返回值
///</return>
if (drag) {
this.M(this.t);
} else {
this.t.onmousedown = function() { };
this.t.onmousemove = function() { };
this.t.onmouseup = function() { };
}
},
////////////////样式控制///////////////////
border: function(border) {
////<summary>
/// 获取或设置模态窗口的边框样式
/// </summary>
///////<param name='borderStyle' type='[borderWidth,borderColor,borderStyle]'>
///////borderWidth:边框宽度,borderColor:边框颜色,borderStyle:边框样式
///////</param>
///////<returns type='{borderWidth,borderColor,borderStyle}'>
///////</returns>
var _S = this.m.style;
var borderWidth = border ? this.d.test(border[0]) ? this.d2.test(border[0]) ? border[0] : border[0] + 'px' : _S.borderWidth : _S.borderWidth;
var borderColor = border ? border[1] || _S.borderColor : _S.borderColor;
var borderStyle = border ? border[2] || _S.borderStyle : _S.borderStyle;
var _B = borderWidth + ' ' + borderColor + ' ' + borderStyle;
this.m.style.border = this.b.style.borderTop = _B;
return { borderWidth: borderWidth, borderColor: borderColor, borderStyle: borderStyle };
},
//控制主体部分样式
bodyStyle: function(styleSheet) {
////<summary>
/// 获取或设置模态窗口的边框样式,有一部分保留属性(即用户无法自定义)
/// </summary>
///////<param name='styleSheet' type='String'>
///////样式表css代码
///////</param>
///////<returns type='style'>
///////主体对象对style对象的引用
///////</returns>
if (styleSheet) {
styleSheet = /\S+;$/.test(styleSheet) ? styleSheet : styleSheet + ';';
styleSheet = /padding:[\d+]\S/.test(styleSheet) ? styleSheet : styleSheet + this.style['padding']['bPadding'];
styleSheet = styleSheet.replace(/float+/, 'h');
styleSheet = styleSheet.replace(/position+/, 'h');
styleSheet = styleSheet.replace(/overflow+/, 'h');
styleSheet += this.style['overflow']['bOverflowY'];
this.b.removeAttribute('style');
if (this.browser.msie) this.b.style.cssText = styleSheet;
else this.b.setAttribute('style', styleSheet);
this.b.style.margin = this.style['margin']['bMargin'].replace(/margin:/, '').replace(/\;/, '');
this.b.style.border = '0px';
this.b.style.borderTop = this.m.style.border;
}
return this.b.style;
},
bgStyle: function(styleSheet) {
////<summary>
/// 获取或设置模态窗口的背景样式,有一部分保留属性(即用户无法自定义)
/// </summary>
///////<param name='styleSheet' type='String'>
///////样式表css代码
///////</param>
///////<returns type='style'>
///////背景对象对style对象的引用
///////</returns>
if (styleSheet) {
styleSheet = /\S+;$/.test(styleSheet) ? styleSheet : styleSheet + ';';
styleSheet = styleSheet.replace(/float/, 'h');
if (!/position/.test(styleSheet)) styleSheet += this.style['position']['absolute'];
if (!/width/.test(styleSheet)) styleSheet += this.style['width']['bgWidth'];
if (!/height/.test(styleSheet)) styleSheet += this.style['height']['bgHeight'];
if (!/left|right/.test(styleSheet)) styleSheet += this.style['left']['bgLeft'];
if (!/top|bottom/.test(styleSheet)) styleSheet += this.style['top']['bgTop'];
if (!/opacity/.test(styleSheet)) styleSheet += this.style['opacity']['bgOpacity'];
this.bg.removeAttribute('style');
//alert(styleSheet); return;
if (this.browser.msie) this.bg.style.cssText = styleSheet;
else this.bg.setAttribute('style', styleSheet);
this.bg.style.border = '0px';
this.bg.style.position = 'absolute';
//this.culPosition(); //重新计算位置
}
return this.bg.style;
},
titleStyle: function(styleSheet) {
////<summary>
/// 获取或设置模态窗口的标题样式,有一部分保留属性(即用户无法自定义)
/// </summary>
///////<param name='styleSheet' type='String'>
///////样式表css代码
///////</param>
///////<returns type='style'>
///////标题对象对style对象的引用
///////</returns>
if (styleSheet) {
styleSheet = /\S+;$/.test(styleSheet) ? styleSheet : styleSheet + ';';
styleSheet = /padding:[\d+]\S/.test(styleSheet) ? styleSheet : styleSheet + this.style['padding']['bPadding'];
styleSheet = styleSheet.replace(/float/, 'h');
styleSheet = styleSheet.replace(/position/, 'h');
this.t.removeAttribute('style');
if (this.browser.msie) this.t.style.cssText = styleSheet;
else this.t.setAttribute('style', styleSheet);
this.t.style.margin = this.style['margin']['bMargin'].replace(/margin:/, '').replace(/\;/, '');
this.t.style.border = '0px';
}
return this.t.style;
}
};
////////////////////////////////////////////
////////////////////关闭模态窗口
///////////////////////////////////////////
function _close(oElement) {
if (oElement) {
oElement.parentNode.removeChild(oElement);
}
}
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/Dirzhh/archive/2009/11/03/4756109.aspx
相关推荐
6. **可访问性**:确保模态窗口遵循无障碍设计原则,例如提供键盘导航支持和清晰的焦点管理。 这个名为"mode_window"的压缩包可能包含了上述所有资源,包括HTML、CSS和JavaScript文件,用于构建和演示这个简单的...
本文将深入探讨“可拖拽的谷歌样式纯javascript模态窗口插件”的相关知识点。 首先,让我们了解什么是模态窗口。模态窗口(Modal Window)在网页上表现为一个覆盖在主页面上的半透明层,通常包含一些特定的信息或...
2. CSS样式:为模态窗口添加样式,使其在默认状态下不可见,并设置遮罩层的透明度和位置。 ```css .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; ...
JavaScript 模态窗口,经历2次升级,使用方便,操作灵活, 支持IE、Mozilla FireFox、Sarafi、Opera、Chrome等多浏览器,版权所有,请勿用作商业用途
在本案例中,我们关注的是"Bootstrap自定义模态窗口样式",这是一种通过自定义CSS代码来增强Bootstrap默认模态窗口视觉效果的方法。 模态窗口(Modal)是Bootstrap中的一个重要组件,它允许在当前页面上弹出一个...
在`<head>`中,我们可能需要引入一个外部CSS文件,例如`styles.css`,来定义模态窗口的样式,以及一个JavaScript文件,例如`modal.js`,来处理模态窗口的显示和隐藏逻辑。 在`<body>`部分,我们可以创建一个隐藏的`...
对于局部模态效果,即只在特定区域展现的模态窗口,可以通过调整 CSS 样式实现。例如,给模态窗口添加一个定位在某个元素上方的 CSS 类: ```css .local-modal { position: absolute; top: 50px; /* 调整为实际...
本篇将详细介绍如何实现一个具有Bootstrap样式的、在特定区域内可拖拽的非模态窗口,并讨论相关的JavaScript技术。 首先,让我们理解"非模态窗口"(Non-modal window)的概念。与传统的模态对话框不同,非模态窗口...
4. **CSS操作**:虽然JQuery主要用于JavaScript,但也可以辅助修改CSS属性,如透明度、位置等,以达到理想的模态窗口样式。 下面是一个基本的模态窗口实现步骤: 1. 创建HTML结构:定义一个隐藏的模态窗口和一个...
Vito博客园文章-WPF.UIShell UIFramework之自定义窗口的深度技术 - 模态闪动(Blink)、窗口四边拖拽支持(WmNCHitTest)、自定义最大化位置和大小(WmGetMinMaxInfo)的部分Code 文章链接: ...
在网页设计中,`div` 和 `css` 是构建页面布局和样式的重要工具,而模态窗口(Modal Window)则是用户界面设计中的一个常见元素。模态窗口是一种弹出式的对话框,它会覆盖住主页面,使得用户必须先与模态窗口交互...
**跨浏览器模态窗口|对话框|提示框插件——Ply** 在Web开发中,模态窗口、对话框和提示框是不可或缺的交互元素,它们用于向用户展示重要信息或进行确认操作。Ply是一款专门针对这类需求设计的插件,它提供了丰富的...
在QML(Qt Quick)中,自定义模态对话框是一种常见的需求,它允许开发者创建具有独特设计和功能的交互式界面元素。不同于标准的`Popup`组件,自定义模态对话框通常需要更高的定制性,以满足特定的用户体验或项目需求...
### 模态窗口解决方案:全面解析与跨浏览器支持 在现代网页设计中,模态窗口(Modal Window)作为一种常见的交互模式,被广泛应用于各种场景,如登录框、弹出提示、对话框等。然而,不同浏览器对模态窗口的支持程度...
【DIV模态窗口实现】是一种常见的前端网页设计技术,它允许在不离开当前页面的情况下,弹出一个窗口显示额外的信息或功能。模态窗口通常用于登录、注册、提示信息、表单提交等场景,能够提供良好的用户体验,因为它...
jQuery模态窗口通常通过CSS控制样式,JavaScript处理事件和行为来实现。基本思路是在页面上创建一个隐藏的div(模态窗口),当需要弹出时,通过改变其CSS属性使其可见,并添加必要的遮罩层,以阻止用户与背景内容的...
5. **可配置性**:插件支持自定义设置,如是否显示关闭按钮、按钮文本、背景透明度等,这些都可以在初始化模态窗口时通过选项参数进行配置。 6. **响应式设计**:tingle.js考虑到了移动设备的使用,模态窗口会根据...
JavaScript模态窗口是一种在网页上实现弹出式对话框的技术,通常用于显示警告、确认或输入信息等场景。模态窗口的特点是它会阻止用户与背景页面的交互,直到用户处理完当前窗口中的事务。本篇文章将深入探讨...
但考虑到IE的市场份额不断下降以及对现代Web标准的支持不足,开发者应考虑使用更广泛的跨浏览器解决方案,如Bootstrap模态、jQuery UI对话框等。这些工具不仅提供了更丰富的定制选项,还确保了良好的用户体验和代码...