我思故我強

          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 李云澤 閱讀(6308) 評論(0)  編輯  收藏 所屬分類: javascript

          主站蜘蛛池模板: 广德县| 康定县| 唐海县| 乌兰浩特市| 朝阳县| 观塘区| 金沙县| 任丘市| 长宁县| 景谷| 万年县| 吴旗县| 海林市| 多伦县| 开江县| 金塔县| 定兴县| 丰原市| 太仆寺旗| 辽宁省| 莆田市| 乌兰浩特市| 辰溪县| 平顶山市| 新泰市| 阿拉善右旗| 高密市| 怀柔区| 贡觉县| 独山县| 新民市| 新宾| 惠来县| 西城区| 通海县| 深水埗区| 青田县| 岳阳县| 外汇| 巴林左旗| 砀山县|