载入中
自定义HTML载入中... loading
基于jquery的锁定弹出层 [原创 2007-10-18 00:08:37]   
字体变小 字体变大

这个东西也是随手总结出来的,引用了一些js框架jquery的方法。div遮盖其他控件的方法参考了:http://www.leeyupeng.com/?p=265

对于需要遮盖flash的,请将flash控件的WMode变量值设置为Transparent

使用方法:

<script src="jquery.js"></script>

<script src="effect/maskDiv.js"></script>

<script>

//配置模块

        var moduleEvent = [{"idName":"close" , "eventName":"click" , "doMethod":"CLOSE_DIV"},{"idObj":window,"eventName":"resize" , "doMethod":"RESIZE_WINDOW"}];
        qihoo_effect_maskDiv.showMaskDiv("your div id" , moduleEvent);  //请把div的display设置为none。

</script>

*******************************************************

effect/maskDiv.js

var qihoo_effect_maskDiv = {    
    _module : {},    
    _css : {},        
    _instance : "" ,
   
    _event : {"CLOSE_WINDOW" : function() { window.close(); } , "CLOSE_DIV" : function(){qihoo_effect_maskDiv.closeDiv();} , "RESIZE_WINDOW" : function(){qihoo_effect_maskDiv.resizeWindow();} },
   
    _isIe : eval("false;/*@cc_on@if(@\x5fwin32)isMSIE=true@end@*/") ,
   
    init : function (){  
         if (this._instance){
             return this._instance;
         }
                
         this.appendBackGroundDiv(); 
         this._instance = this;
         return this._instance;
    },
   
    appendBackGroundDiv : function (){              
         this._module.backGroundDiv = $("<div id='qihoo_effect_maskDiv_module_backGroundDiv'></div>");
         this._module.backGroundDiv.appendTo("body");
         this._css.mask = { "background-color":"#000" , "position":"absolute", "-moz-opacity": "0.75" , "filter":"alpha(opacity=75)","z-index":5 , "width" : document.body.clientWidth+100 , "height" : document.body.clientHeight+300 , "top" : "0px" , "left":"0px" , "display" : "none"};        
         this._module.backGroundDiv.css(this._css.mask);
        
         this._module.coverIframe = $("<iframe src='javascript:false' id='qihoo_effect_maskDiv_module_iframe' frameborder='1'></iframe>");        
         this._css.normalIframe = {'position':'absolute','left':'-1000px','top':'-1000px','z-index':7}; 
         this._module.coverIframe.css(this._css.normalIframe);
         this._module.coverIframe.appendTo("body");
    },
   
    showMaskDiv : function (showDivId , moduleEvent, position ){
         instance = this;
           
         if (this._isIe){
             if(document.readyState != "complete"){
                 setTimeout(function(){instance.showMaskDiv(showDivId , moduleEvent , position);} , 100); 
                 return false;
             }
         } 
        
         if ("" == this._instance){
            this.init();
         }
                         
         this._module.showDiv = $("#"+showDivId);   
        
         if (typeof position == 'undefined'){
            this._css.coverIframe = {'position':'absolute','top':parseInt(screen.height/4+document.documentElement.scrollTop)+"px",'left':parseInt(screen.width/4+document.documentElement.scrollLeft)+"px",'zIndex':7};
            this._css.coverd = {"zIndex" : 10 , "position" : "absolute" ,"width":"400px" , "height":"240px" ,"top": parseInt(screen.height/4+document.documentElement.scrollTop)+"px", "left":parseInt(screen.width/4+document.documentElement.scrollLeft)+"px"};                  
         }  
         else{ 
            this._css.coverIframe = {'position':'absolute',"height" : position.height, "width":position.width , "top": position.top , "left":position.left,'zIndex':7};
            this._css.coverd = {"zIndex" : 10 , "position" : "absolute" , "height" : position.height, "width":position.width , "top": position.top , "left":position.left};     
         }
        
         for (var i in moduleEvent){
            if (typeof moduleEvent[i].idName != "undefined") {
                $("#"+moduleEvent[i].idName).bind(moduleEvent[i].eventName , this._event[moduleEvent[i].doMethod]);
            }  
            if (typeof moduleEvent[i].idObj != "undefined") {
                $(moduleEvent[i].idObj).bind(moduleEvent[i].eventName , this._event[moduleEvent[i].doMethod]);
            } 
         } 
         this._module.backGroundDiv.show();   
         showDivFront = this._module.showDiv;
         cssParam = this._css;
         coveredIframe = this._module.coverIframe;
         this._module.backGroundDiv.animate({opacity:0.75},"normal" , function(){coveredIframe.css(cssParam.coverIframe);showDivFront.show();});
         this._module.showDiv.css(this._css.coverd);
    },
   
    resizeWindow : function (){
         this._css.mask = { "background-color":"#000" , "position":"absolute", "-moz-opacity": "0.75" , "opacity":"0.75" , "filter":"alpha(opacity=75)","zIndex":5 , "width" : document.body.clientWidth+100, "height" : document.body.clientHeight+300 , "top" : "0px" , "left":"0px"};           
         this._module.backGroundDiv.css(this._css.mask); 
    },
   
    closeDiv : function (){
         this._module.coverIframe.css(this._css.normalIframe);
         this._module.showDiv.hide();   
         hidebBackGroundDiv = this._module.backGroundDiv;
         this._module.backGroundDiv.animate({opacity:0},"normal", function(){hidebBackGroundDiv.hide();});   
    }   
};

分类: 工作笔记
所属版块: 科技
票数:
什么是“我顶”?
点击数:    评论数:
本文章引用通告地址(TrackBack Ping URL)为:
本文章尚未被引用。
发表评论
大 名:
(不填写则显示为匿名者)
网 址:
(您的网址,可以不填)
标 题:
内 容:
请根据下图中的字符输入验证码:
(您的评论将有可能审核后才能发表)
和讯个人门户 v1.0 | 和讯部落 | 客服中心