我思故我強

JS遮罩效果 （很強）

//<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
/*
| -------------------------------------------------------------------
| Dialog 浮動提示框 發布版本3 【功能說明】
| -------------------------------------------------------------------
| 支持瀏覽器 FF, IE, OP
| 支持拖動，自定義標題，寬度，高度，內容。
| 自定義按鈕是否顯示，確定，取消，關閉。
| 支持打開新窗口，支持嵌入網頁。
| IE,下對Select完整遮罩
|
| -------------------------------------------------------------------
| Dialog 浮動提示框 發布版本3 【使用方法】
| -------------------------------------------------------------------
| 在需要使用的頁面中，最下面</body>前加入腳本
| <script type="text/javascript">new dialog().init();</script>
| 目前暫時只能這么做，背景遮罩將失去效果
|
| 調用提示框的腳本是 new dialog().event();
|
*/

//檢測瀏覽器
var userAgent = navigator.userAgent.toLowerCase();
var is_opera = userAgent.indexOf('opera') != -1 && opera.version();
var is_moz = (navigator.product == 'Gecko') && userAgent.substr(userAgent.indexOf('firefox') + 8, 3);
var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);

function dialog(){
//設置提示框默認標題,寬度，高度，邊框顏色
var title????? = '系統提示信息';
var width????? = 520;
var height???? = 320;
var bodercolor = "#000";

//設置提示框標題 背景顏色，字體顏色，字體形狀
var titlebgcolor??? = "#DAf998";
var titlefontcolor = "#666";
var titlefontweight = "bold";

//設置提示框內容 背景顏色，字體顏色
var bodybgcolor?? = "#fff";
var bodyfontcolor = "#000";

//默認陰影顏色,透明度(0-100),陰影寬度，高度
var ShadowColor?? = "#000";
var ShadowOpacity = 60;
var ShadowWdith?? = 6;
var ShadowHeight = 6;

//背景遮罩層,最小透明度(0-100)、最大透明度(0-100)、增加減少數(0-100),運行速度(1000=1秒)
var ScreenOverSwitch?????? = 1;
var ScreenOverBgColor????? = "#7799ff";
var ScreenOverOpacityMin?? = 0;
var ScreenOverOpacityMax?? = 40;
var ScreenOverOpacitySpeed = 5;
var ScreenOverOpacitySleep = 50;

//圖片瀏覽盒最小寬度、高度
var ImageViewBoxWidthMin = 500;
var ImageViewBoxHeightMin = 500;

//頁面默認滾動條狀態
var bodyoverflow = "hidden";

//展示圖片狀態
var zoomobj = Array()

//默認按鈕 設置（確認，取消）
var sFunc = '<input id="dialogOk" type="button" style="background:#fff;width:60px;height:20px;border:#000 1px solid;line-height:20px;" value="確認" onclick="new dialog().reset();" /> <input id="dialogCancel" type="button" style="background:#fff;width:60px;height:20px;border:#000 1px solid;line-height:20px;" value="取消" onclick="new dialog().reset();" /> ';

//默認關閉按鈕
var sClose = '<input type="image" id="dialogBoxClose" onclick="new dialog().reset();" src="images/CloseOut.gif" border="0" width="17" height="17" onmouseover="this.src=\'CloseOver.gif\';" onmouseout="this.src=\'images/CloseOut.gif\';" align="absmiddle" />';

//設置初始提示框內容
var sBody = '\
?? <table id="dialogBodyBox" border="0" align="center" cellpadding="0" cellspacing="0">\
??? <tr height="10"><td colspan="4"></td></tr>\
??? <tr>\
???? <td width="10"></td>\
???? <td id="dialogMsg" style="font-size:12px;color:'+bodyfontcolor+';"></td>\
???? <td width="10"></td>\
??? </tr>\
??? <tr height="10"><td colspan="3" align="center"></td></tr>\
??? <tr><td id="dialogFunc" colspan="3" align="center">' + sFunc + '</td></tr>\
??? <tr height="10"><td colspan="3" align="center"></td></tr>\
?? </table>\
';

//設置初始提示框框架
var sBox = '\
?? <table id="dialogBox" width="' + width + '" border="0" cellpadding="0" cellspacing="0" style="border:1px solid '+bodercolor+';display:none;z-index:100;">\
??? <tr height="1" style="background:#fff;"><td></td></tr>\
??? <tr height="25" style="background:'+titlebgcolor+';">\
???? <td>\
????? <table onselectstart="return false;" style="-moz-user-select:none;" width="100%" border="0" cellpadding="0" cellspacing="0">\
?????? <tr>\
??????? <td width="6"></td>\
??????? <td id="dialogBoxTitle" onmousedown="new dialog().moveStart(event, \'dialogBox\')" style="color:'+titlefontcolor+';cursor:move;font-size:12px;font-weight:'+titlefontweight+';">'+title+'</td>\
??????? <td id="dialogClose" width="27" align="right" valign="middle">\
???????? ' + sClose + '\
??????? </td>\
??????? <td width="6"></td>\
?????? </tr>\
????? </table>\
???? </td>\
??? </tr>\
??? <tr id="dialogHeight" style="height:' + height + '">\
???? <td id="dialogBody" style="background:'+bodybgcolor+';color:'+bodyfontcolor+';">' + sBody + '</td>\
??? </tr>\
?? </table>\
?? <div id="dialogBoxHideImageViewBox" style="visibility:hidden;display:none!important;display:block;"><img id="HideImage" /></div>\
?? <div id="dialogBoxHideIFrame" style="display:block;z-index:98;"><iframe id="HideIFrame" src="about:blank" scrolling="no" frameborder="0" style="width:100%;height:100%;"></iframe></div>\
?? <div id="dialogBoxShadow" style="display:block;z-index:99;"><iframe id="ShadowHideIFrame" src="about:blank" scrolling="no" frameborder="0" style="width:100%;height:100%;"></div>\
';

//自定義$函數，方便使用 document.getElementById()
//參數一(_sId)：對象ID名稱
function $(_sId){return document.getElementById(_sId)}

//顯示提示框
//無參數
this.show = function(){
?? //判斷提示框是否存在，不存在則初始化
?? $('dialogBodyBox') ? function(){} : this.init();
?
?? if(ScreenOverSwitch){
??? //顯示背景遮罩
??? this.showSO();
?? }else{
??? this.showSO(1,1);
?? }
?
?? //顯示提示框
?? this.middle('dialogBox');
?
?? //顯示提示框陰影
?? this.shadow();
}

//重置提示框內容，隱藏遮罩
//無參數
this.reset = function(){
?? //關閉提示框
?? $('dialogBox').style.display='none';
?
?? //關閉陰影
?? $('dialogBoxShadow').style.display = "none";
?
?? //關閉IE屏蔽,用來屏蔽SELECT
?? $('dialogBoxHideIFrame').style.display = "none";
?
?? //初始化提示框內容
?? $('dialogBody').innerHTML = sBody;
?
?? if(ScreenOverSwitch){
??? //隱藏背景遮罩
??? this.hideSO();
?? }else{
??? this.hideSO(1,1);
?? }
?
?? //設置提示框按鈕，1顯示，0隱藏
?? $('dialogOk').style.display = 'block';
?? $('dialogCancel').style.display = 'block';
?? $('dialogBoxClose').style.display = 'block';
}

//設置提示框內容,刷新提示框
//參數一(_sHtml)：提示框內容可以是HTML
this.html = function(_sHtml){
?? //設置提示框內容
?? $("dialogBody").innerHTML = _sHtml;
?
?? //顯示提示框(重復使用，等于刷新)
?? this.show();
}

//初始化提示框
//無參數
this.init = function(){
?? //檢測是否存在提示框容器，存在則移除
?? $('dialogCase') ? $('dialogCase').parentNode.removeChild($('dialogCase')) : function(){};
?
?? //創建提示框容器
?? var oDiv = document.createElement('span');
?
?? //設置容器ID
?? oDiv.id = "dialogCase";
?
?? //放入提示框框架
?? oDiv.innerHTML = sBox;
?
?? //將容器+如頁面
?? document.body.appendChild(oDiv);
?
?? //重置提示框內容
?? this.reset();
}

//顯示提示框陰影
//無參數
this.shadow = function(){
?? //獲取陰影層屬性
?? var oShadow = $('dialogBoxShadow');
?
?? //獲取提示框屬性
?? var oDialog = $('dialogBox');
?
?? //獲取IE屏蔽層屬性
?? var oIFrame = $('dialogBoxHideIFrame');
?
?? //設置陰影屬性
?? oShadow['style']['position'] = "absolute";
?? oShadow['style']['background'] = ShadowColor;
?? oShadow['style']['display'] = "";
?? oShadow['style']['opacity'] = parseInt(ShadowOpacity)/100;
?? oShadow['style']['filter'] = "alpha(opacity="+ShadowOpacity+")";
?? oShadow['style']['top'] = oDialog.offsetTop + ShadowHeight + "px";
?? oShadow['style']['left'] = oDialog.offsetLeft + ShadowWdith + "px";
?? oShadow['style']['width'] = oDialog.offsetWidth + "px";
?? oShadow['style']['height'] = oDialog.offsetHeight + "px";
?
?? //設置IE屏蔽層屬性
?? oIFrame['style']['display'] = "";
?? oIFrame['style']['position'] = "absolute";
?? oIFrame['style']['top'] = oDialog.offsetTop + "px";
?? oIFrame['style']['left'] = oDialog.offsetLeft + "px";
?? oIFrame['style']['width'] = oDialog.offsetWidth + "px";
?? oIFrame['style']['height'] = oDialog.offsetHeight + "px";
?
?? //設置陰影層背景顏色
?? var editor;
?? editor = $("ShadowHideIFrame").contentWindow;
?
?? // 針對IE瀏覽器, 可編輯
?? editor.document.designMode = 'on';
?? editor.document.contentEditable = true;
?
?? // 兼容 FireFox, 打開并寫入
?? editor.document.open();
?? editor.document.writeln('<body style="background:'+ShadowColor+';margin:0px;"></body>');
?? editor.document.close();
}

//嵌入打開網頁
//參數一(_sUrl)： 嵌入網頁地址
//參數二(_sMode)：滾動條模式（值: no, yes, auto）
//參數三()：????? 提示框標題
//參數四()：????? 提示框寬度
//參數五()：????? 提示框高度
this.open = function(_sUrl, _sMode){
?? //獲取隱藏參數內容，標題，寬度，高度，如果空，則使用默認
?? var _sTitle=arguments[2]?arguments[2]:title;
?? var _sWidth=arguments[3]?arguments[3]:width;
?? var _sHeight=arguments[4]?arguments[4]:height;
?
?? //設置提示框屬性
?? this.set('title',_sTitle);
?? this.set('width',_sWidth);
?? this.set('height',_sHeight);
?
?? //顯示提示框
?? this.show();
?
?? //嵌入網頁
?? $("dialogBody").innerHTML = "<iframe id='dialogFrame' width='"+_sWidth+"' height='"+_sHeight+"' frameborder='0' scrolling='" + _sMode + "'></iframe>";
?
?? //設置網頁地址
?? $("dialogFrame").src = _sUrl;
}

//打開新窗口(居中且只有標題欄，不含工具欄，菜單欄等)
//參數一(_sUrl)：?? 網頁地址
//參數一(_iWidth)： 窗口寬度
//參數一(_iHeight)：窗口高度
//參數四(_sMode)： 滾動條模式（值: no, yes, auto）
this.showWindow = function(_sUrl, _iWidth, _iHeight, _sMode){
?? var oWindow;
?? //獲取窗口居中位置
?? var sLeft = (screen.width) ? (screen.width - _iWidth)/2 : 0;
?? var sTop = (screen.height) ? (screen.height - _iHeight)/2 : 0;
?
?? //打開新窗口
?? oWindow = window.open(_sUrl, '', 'height=' + _iHeight + ', width=' + _iWidth + ', top=' + sTop + ', left=' + sLeft + ', toolbar=no, menubar=no, scrollbars=' + _sMode + ', resizable=no,location=no, status=no');
}

//調用提示框
//參數一(_sMsg)：?? 提示信息
//參數二(_sOk)：??? 是否顯示“確認”按鈕(顯示：1，不顯示:0)
//參數三(_sCancel)：是否顯示“取消”按鈕(顯示：1，不顯示:0)
//參數四(_sClose)： 是否顯示“關閉”按鈕(顯示：1，不顯示:0)
//參數五()：??????? 提示框標題
//參數六()：??????? 提示框寬度
//參數七()：??????? 提示框高度
this.event = function(_sMsg, _sOk, _sCancel, _sClose){
?? //寫入 確認，取消按鈕
?? $('dialogFunc').innerHTML = sFunc;
?
?? //寫入 關閉按鈕
?? $('dialogClose').innerHTML = sClose;
?
?? //如果提示信息層不存在，則寫入提示信息層
?? $('dialogBodyBox') == null ? $('dialogBody').innerHTML = sBody : function(){};
?
?? //寫入提示信息
?? $('dialogMsg') ? $('dialogMsg').innerHTML = _sMsg : function(){};
?
?? //獲取隱藏參數內容，標題，寬度，高度，如果空，則使用默認
?? var _sTitle=arguments[4]?arguments[4]:title;
?? var _sWidth=arguments[5]?arguments[5]:width;
?? var _sHeight=arguments[6]?arguments[6]:height;
?
?? //設置提示框
?? this.set('title',_sTitle);
?? this.set('width',_sWidth);
?? this.set('height',_sHeight);
?
?? //設置提示框按鈕，1顯示，0隱藏
?? _sOk ? $('dialogOk').focus() : $('dialogOk').style.display = 'none';
?? _sCancel ? function(){} : $('dialogCancel').style.display = 'none';
?? _sClose ? function(){} : $('dialogBoxClose').style.display = 'none';
?
?? //顯示提示框
?? this.show();
}

//嵌入打開網頁
//參數一(_sImage)： 圖片ID
//參數二()：??????? 圖片名稱
this.imageview = function(_sImage){
?? $("HideImage").src = _sImage.src;
?
?? //獲取隱藏參數內容，標題，寬度，高度，如果空，則使用默認
?? var _sTitle=arguments[1]?arguments[1]:"&nbsp;";?
?? var _sWidth=$("HideImage").width;
?? var _sHeight=$("HideImage").height;
?
?? if(_sHeight>document.body.clientHeight){
??? _sHeight = document.body.clientHeight-30-ShadowHeight;
?? }
?
?? //設置提示框屬性
?? this.set('title',_sTitle);
?? this.set('width',_sWidth);
?? this.set('height',_sHeight);
?
?? //顯示提示框
?? this.show();
?
?? //嵌入圖片
?? $("dialogBody").innerHTML = '<img id="ViewImage" src="'+_sImage.src+'" height="'+_sHeight+'" />';
?? this.set('width',$("ViewImage").width);
?
?? //獲取圖片瀏覽最大值
?? zoomobj['zimginfo'] = [parseInt($("ViewImage").width), parseInt($("ViewImage").height)]
?
?? //檢測瀏覽器，賦予滾輪事件
?? if(is_ie){
??? $('ViewImage').onmousewheel = this.imgzoom;
?? } else {
??? $('ViewImage').addEventListener("DOMMouseScroll", this.imgzoom, false);
?? }
}

//圖片預覽大小縮放
this.imgzoom = function(event){
?? //獲取窗口事件
?? oEvent = window.event ? window.event : event;
?
?? //檢測滾輪
?? if(oEvent.wheelDelta <= 0 || oEvent.detail > 0) {
??? if(parseInt($('ViewImage').height) <= parseInt(ImageViewBoxHeightMin)) {
???? $('ViewImage').height = parseInt(ImageViewBoxHeightMin);
??? }else{
???? $('ViewImage').height -= parseInt(zoomobj['zimginfo'][1] / 5);
??? }
?? } else {
??? if(parseInt($('ViewImage').height) >= parseInt(zoomobj['zimginfo'][1])) {
???? $('ViewImage').height = parseInt(zoomobj['zimginfo'][1]);
??? }else{
???? $('ViewImage').height += parseInt(zoomobj['zimginfo'][1] / 5);
??? }
?? }
?
?? //獲取陰影層，提示框，提示框高度，IE遮罩層
?? var oShadow = $('dialogBoxShadow');
?? var oDialog = $('dialogBox');
?? var oHeight = $('dialogHeight');
?? var oHFrame = $('dialogBoxHideIFrame');
?
?? //重置提示框屬性
?? oDialog['style']['width'] = parseInt($('ViewImage').width)+'px';
?? oHeight['style']['height'] = parseInt($('ViewImage').height)+'px';
?
?? //重置提示框位置
?? oDialog['style']['position'] = "absolute";
?? oDialog['style']['left'] = (document.body.clientWidth / 2) - (oDialog.offsetWidth / 2) + "px";
?? oDialog['style']['top'] = (document.body.clientHeight / 2 + document.body.scrollTop) - (oDialog.offsetHeight / 2) + "px";
?
?? //重置陰影位置
?? oShadow['style']['opacity'] = parseInt(ShadowOpacity)/100;
?? oShadow['style']['filter'] = "alpha(opacity="+ShadowOpacity+")";
?? oShadow['style']['top']???? = parseInt(oDialog.offsetTop) + ShadowHeight + "px";
?? oShadow['style']['left']??? = parseInt(oDialog.offsetLeft) + ShadowWdith + "px";
?? oShadow['style']['width']?? = parseInt(oDialog.offsetWidth) + "px";
?? oShadow['style']['height'] = parseInt(oDialog.offsetHeight) + "px";
?
?? //重置IE屏蔽層位置
?? oHFrame['style']['left']??? = parseInt(oDialog.offsetLeft) + "px";
?? oHFrame['style']['top']???? = parseInt(oDialog.offsetTop) + "px";
?? oHFrame['style']['width']?? = parseInt(oDialog.offsetWidth) + "px";
?? oHFrame['style']['height'] = parseInt(oDialog.offsetHeight) + "px";
?
}

//提示框設置
//參數一(_oAttr)：?? 設置項名稱
//參數二(_sVal)：??? 設置內容
this.set = function(_oAttr, _sVal){
?
?? //獲取陰影層，提示框，提示框高度，IE遮罩層
?? var oShadow = $('dialogBoxShadow');
?? var oDialog = $('dialogBox');
?? var oHeight = $('dialogHeight');
?? var oHFrame = $('dialogBoxHideIFrame')

?? //設置內容不為空
?? if(_sVal != ''){
??? //判斷項名稱
??? switch(_oAttr){
???? //設置標題
???? case 'title':
????? $('dialogBoxTitle').innerHTML = _sVal;
????? title = _sVal;
????? break;
????
???? //設置提示框寬
???? case 'width':
????? oDialog['style']['width'] = _sVal+'px';
????? width = _sVal;
????? break;
????
???? //設置提示框高
???? case 'height':
????? oHeight['style']['height'] = _sVal+'px';
????? height = _sVal;
????? break;
???
???? //設置遮罩層狀態
???? case 'ScreenOverSwitch':
????? ScreenOverSwitch = _sVal;
????? break;
????
???? //設置提示框遮罩層顏色
???? case 'ScreenOverBgColor':
????? ScreenOverBgColor = _sVal;
????? break;
????
???? //設置陰影顏色
???? case 'shadowcolor':
????? oShadow['style']['background'] = _sVal;
????? //設置陰影層背景顏色
????? var editor;
????? editor = $("ShadowHideIFrame").contentWindow;

????? // 針對IE瀏覽器, 可編輯
????? editor.document.designMode = 'on';
????? editor.document.contentEditable = true;

????? // 兼容 FireFox, 打開并寫入
????? editor.document.open();
????? editor.document.writeln('<body style="background:'+_sVal+';margin:0px;"></body>');
????? editor.document.close();
????? ShadowColor = _sVal;
????? break;
???
???? //設置陰影透明度
???? case 'shadowopacity':
????? ShadowOpacity = _sVal;
????? break;
???
???? //設置陰影寬度
???? case 'shadowwdith':
????? ShadowWdith = _sVal;
????? break;
???
???? //設置陰影高度
???? case 'shadowheight':
????? ShadowHeight = _sVal;
????? break;
??? }
?? }
?
?? //刷新提示框
?? this.middle('dialogBox');
?
?? //重置陰影位置
?? oShadow['style']['opacity'] = parseInt(ShadowOpacity)/100;
?? oShadow['style']['filter'] = "alpha(opacity="+ShadowOpacity+")";
?? oShadow['style']['top']???? = oDialog.offsetTop + ShadowHeight + "px";
?? oShadow['style']['left']??? = oDialog.offsetLeft + ShadowWdith + "px";
?? oShadow['style']['width']?? = oDialog.offsetWidth + "px";
?? oShadow['style']['height'] = oDialog.offsetHeight + "px";
?
?? //重置IE屏蔽層位置
?? oHFrame['style']['left']??? = oDialog.offsetLeft + "px";
?? oHFrame['style']['top']???? = oDialog.offsetTop + "px";
?? oHFrame['style']['width']?? = oDialog.offsetWidth + "px";
?? oHFrame['style']['height'] = oDialog.offsetHeight + "px";
}

//拖動提示框
//參數一(event)：?? 點擊事件，使用的時候賦值event就可以
//參數二(_sId)：??? 拖動對象ID
this.moveStart = function (event, _sId){
?? //獲取拖動對象
?? var oObj = $(_sId);
?
?? //賦予對象拖動操作
?? oObj.onmousemove = mousemove;
?? oObj.onmouseup = mouseup;
?
?? //捕獲鼠標移動
?? oObj.setCapture ? oObj.setCapture() : function(){};
?
?? //獲取窗口事件
?? var oEvent = window.event ? window.event : event;
?
?? //保留鼠標位置
?? var dragData = {x : oEvent.clientX, y : oEvent.clientY};
?
?? //保留對象位置
?? var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
?
?? //鼠標移動
?? function mousemove(event){
??? //獲取窗口事件
??? oEvent = window.event ? window.event : event;
??
??? //計算提示框位置
??? var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
??? var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
??
??? //設置提示框位置
??? oObj.style.left = iLeft + "px";
??? oObj.style.top = iTop + "px";
??
??? //設置IE屏蔽層位置
??? $('dialogBoxHideIFrame').style.left = iLeft + "px";
??? $('dialogBoxHideIFrame').style.top = iTop + "px";
??
??? //設置陰影位置
??? $('dialogBoxShadow').style.left = iLeft + ShadowWdith + "px";
??? $('dialogBoxShadow').style.top = iTop + ShadowHeight + "px";
??
??? //刷新保留鼠標位置
??? dragData = {x: oEvent.clientX, y: oEvent.clientY};
?? }
?
?? //鼠標鍵抬起
?? function mouseup(event){
??? //獲取窗口事件
??? oEvent = window.event ? window.event : event;
??
??? //清除對象拖動操作
??? oObj.onmousemove = null;
??? oObj.onmouseup = null;
??
??? //如果鼠標是否超出瀏覽器范圍
??? if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
???? //還原提示框位置
???? oObj.style.left = backData.y + "px";
???? oObj.style.top = backData.x + "px";
???
???? //還原IE屏蔽層位置
???? $('dialogBoxHideIFrame').style.left = backData.y + "px";
???? $('dialogBoxHideIFrame').style.top = backData.x + "px";
???
???? //還原陰影位置
???? $('dialogBoxShadow').style.left = backData.y + ShadowWdith + "px";
???? $('dialogBoxShadow').style.top = backData.x + ShadowHeight + "px";
??? }
??
??? //關閉捕獲鼠標移動
??? oObj.releaseCapture ? oObj.releaseCapture() : function(){};
?? }
}

//顯示背景遮罩層
//參數一()：??? 設置最小透明度，空則使用默認(0-100)
//參數二()：??? 設置最大透明度，空則使用默認(0-100)
//參數三()：??? 設置逐步增加數值(0-100)
//參數四()：??? 設置運行速度(1000=1秒)
this.showSO = function(){
?? //獲取背景遮罩層屬性
?? var objScreen = $("ScreenOver");
?
?? //如果背景遮罩層不存在則創建
?? if(!objScreen) var objScreen = document.createElement("div");
?
?? //設置背景遮罩層ID
?? objScreen.id = "ScreenOver";
?
?? //獲取背景遮罩層樣式
?? var oS = objScreen.style;
?
?? //隱藏頁面滾動條
?? document.body.style.overflow="hidden";
?
?? //獲取屏幕寬度，高度
?? if (document.body.clientHeight) {
??? var ww = document.body.clientWidth + "px";
??? var wh = document.body.clientHeight + "px";
?? }else if (window.innerHeight){
??? var ww = window.innerWidth + "px";
??? var wh = window.innerHeight + "px";
?? }else{
??? var ww = "100%";
??? var wh = "100%";
?? }
?
?? //設置背景遮罩曾
?? oS.display = "block";
?? oS.top = oS.left = oS.margin = oS.padding = "0px";
?? oS.width = ww;
?? oS.height = wh;
?? oS.position = "absolute";
?? oS.zIndex = "98";
?? oS.top=document.body.scrollTop + "px";
?? oS.background = ScreenOverBgColor;
?? oS.filter = "alpha(opacity=0)";
?? oS.opacity = 0;
?? oS.MozOpacity = 0;
?
?? //加入頁面
?? document.body.appendChild(objScreen);
?
?? //獲取所有select控件
?? var allselect = document.getElementsByTagName("select");
?? var i=0;
?
?? //設置所有select控件無效，變暗
?? for (i=0; i<allselect.length; i++){
??? allselect[i].disabled = true;
??? allselect[i].style.background="#aaa";
?? }
?
?? //獲取隱藏參數，最小透明度(0-100)、最大透明度(0-100)、增加減少數(0-100),運行速度(1000=1秒)
?? var opacity_min = arguments[0]?arguments[0]:ScreenOverOpacityMin;
?? var opacity_max = arguments[1]?arguments[1]:ScreenOverOpacityMax;
?? var opacity_speed = arguments[2]?arguments[2]:ScreenOverOpacitySpeed;
?? var opacity_sleep = arguments[3]?arguments[3]:ScreenOverOpacitySleep;
?? var opacity = parseInt(opacity_min);
?
?? //顯示背景遮罩層
?? function showscreenover(){
??? //設置背景遮罩層透明度
??? $('ScreenOver').style.filter="alpha(opacity="+opacity+")";
??? $('ScreenOver').style.opacity=opacity/100;
??? $('ScreenOver').style.MozOpacity=opacity/100;
??
??? //如果沒有到最大透明度
??? if(opacity<parseInt(opacity_max)){
???? //減低透明，間隔后再運行
???? opacity=opacity+parseInt(opacity_speed);
???? setTimeout(showscreenover,parseInt(opacity_sleep));
??? }
?? }
?? showscreenover();
}

//隱藏背景遮罩層
//參數一()：??? 設置最小透明度，空則使用默認(0-100)
//參數二()：??? 設置最大透明度，空則使用默認(0-100)
//參數三()：??? 設置逐步增加數值(0-100)
//參數四()：??? 設置運行速度(1000=1秒)
this.hideSO = function(){
?? //獲取隱藏參數，最小透明度(0-100)、最大透明度(0-100)、增加減少數(0-100),運行速度(1000=1秒)
?? var opacity_min = arguments[0]?arguments[0]:ScreenOverOpacityMin;
?? var opacity_max = arguments[1]?arguments[1]:ScreenOverOpacityMax;
?? var opacity_speed = arguments[2]?arguments[2]:ScreenOverOpacitySpeed;
?? var opacity_sleep = arguments[3]?arguments[3]:ScreenOverOpacitySleep;
?? var opacity = parseInt(opacity_max);
?
?? //獲取背景遮罩層屬性
?? var objScreen=$("ScreenOver");
?
?? //如果背景遮罩層不存在則建立
?? if(!objScreen) var objScreen = document.createElement("div");
?
?? //設置背景遮罩層ID
?? objScreen.id = "ScreenOver";
?
?? //加入頁面
?? document.body.appendChild(objScreen);
?
?? //隱藏背景遮罩層
?? function hiddenscreenover(){
??? //設置背景遮罩層透明度
??? $('ScreenOver').style.filter="alpha(opacity="+opacity+")";
??? $('ScreenOver').style.opacity=opacity/100;
??? $('ScreenOver').style.MozOpacity=opacity/100;
??
??? //如果未達到最小透明度
??? if(opacity>parseInt(opacity_min)){
???? //加大透明，間隔后再運行
???? opacity=opacity-parseInt(opacity_speed);
???? setTimeout(hiddenscreenover,parseInt(opacity_sleep));
??? }else{
???? //如果達到最小透明度
???? //移除背景遮罩層
???? document.body.removeChild(objScreen);
???
???? //恢復頁面滾動條狀態
???? document.body.style.overflow=bodyoverflow;
???
???? //獲取所有select控件
???? var allselect = document.getElementsByTagName("select");
???? for (var i=0; i<allselect.length; i++){
????? //設置所有select控件有效,還原顏色
????? allselect[i].disabled = false;
????? allselect[i].style.background="#fff";
???? }
??? }
?? }
?? hiddenscreenover();
}

//設置提示框屬性
this.middle = function(_sId){
?? //設置提示框屬性，并調整位置，居中
?? $(_sId)['style']['display'] = '';
?? $(_sId)['style']['position'] = "absolute";
?? $(_sId)['style']['left'] = (document.body.clientWidth / 2) - ($(_sId).offsetWidth / 2) + "px";
?? $(_sId)['style']['top'] = (document.body.clientHeight / 2 + document.body.scrollTop) - ($(_sId).offsetHeight / 2) + "px";
}
}

posted on 2009-03-06 10:30 李云澤 閱讀(6306) 評論(0)  編輯  收藏 所屬分類: javascript