css弹出层+屏蔽背景页面(兼容fiefox)----V2.01

由于之前发表过" css----弹出层+屏蔽背景页面(兼容fiefox) "，看到点击率很高，因此我也对应的花了更多时间去研究这个功能，当我完成这次新版本之后，发现之前那个真的很粗糙，还有很多不足的地方(然而当时却以为做得很好)!这次的版本是结合我学习了《JavaScript高级程序设》第3章 对象基础 之后进行的改版，还是很新手，所以大家不要见笑。

    因为我的宗旨是简单易用,而且不含其它多余的功能,务求精而简,所以这个功能可能对于所有人并不适用.

    功能没多大变化:

1. 自定义弹出层的大小
2. 弹出层能根据页面大小和用户区域大小来改变(非动态,只对一开始打开的时候有效)
3. 弹出层可以用ajax异步读取其他页面的数据

    这次新版本主要有以下更新:

1. isonWindow(aPars)    ----弹出层对象，其中包含
         1个属性：aPars --参数数组；
         2个方法：show() --显示弹出层、hide() --关闭弹出层
2. _openWindow(aPars)   ----内部函数，显示弹出层，主要控制弹出层的位置、大小
3. _closeWindow()    ----内部函数，关闭弹出层
4. _displaySelect()    ----内部函数，隐藏背景以下的下拉框标签，因为它的优先度太高
5. _ajaxLoadWindow(userID,url) ----内部函数，异步读取数据
6. <div id="LockWindows"> ----用于实现屏蔽弹出层以下的页面
7. <div id="LayoutDIV"> ----用于弹出层垂直居中
8. <div id="WindowDIV"> ----用于显示弹出层的内容

 希望大家能对我的这个功能提出宝贵的意见,衷心的感谢!

代码:

<% @ page contentType = " text/html; charset=utf-8 "  language = " java "  import = " java.sql.* "  errorPage = ""   %>
< script  language ="javascript"  src ="../common/js_css/lib/prototype.js"  type ="text/javascript" ></ script >
< script  language ="javascript"  src ="../common/js_css/lib/myAjax.js"  type ="text/javascript" ></ script >
<% /*
            通用弹出层页面(兼容IE、firefox)
    作者：ison
    创建时间： 2007 - 7 - 11         最后修改时间： 2007 - 7 - 24
    说明：
         1 .isonWindow(aPars)                 ---- 弹出层对象，其中包含
            1个属性：aPars -- 参数数组；
            2个方法：show() -- 显示弹出层、hide() -- 关闭弹出层
         2 ._openWindow(aPars)             ---- 内部函数，显示弹出层，主要控制弹出层的位置、大小
         3 ._closeWindow()                 ---- 内部函数，关闭弹出层
         4 ._displaySelect()                 ---- 内部函数，隐藏背景以下的下拉框标签，因为它的优先度太高
         5 ._ajaxLoadWindow(userID,url)     ---- 内部函数，异步读取数据
         6 . < div id = " LockWindows " >---- 用于实现屏蔽弹出层以下的页面
         7 . < div id = " LayoutDIV " >---- 用于弹出层垂直居中
         8 . < div id = " WindowDIV " >---- 用于显示弹出层的内容
*/ %>
< style  type ="text/css" >
#LockWindows {
    position : absolute ;  top : 0 ;  left : 0 ;  background-color : #777777 ;  z-index : 2 ;  display : none ;
     /*  Moz Family使用私有属性-moz-opacity: 0.70  */
     /*  IE 使用私有属性filter  */
     /*  标准属性opacity支持CSS3的浏览器（FF 1.5也支持） */
    opacity :  0.70 ;
    filter  :  progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=70,finishOpacity=100) ;
    width : expression(documentElement.clientWidth < 900?(documentElement.clientWidth==0?(body.clientWidth<900?'900':'auto'):'900px'):'auto') ;
}
#LayoutDIV { top : 50% ;  left : 50% ;  position : absolute ; display : none ;  z-index : 3 ; }
#WindowDIV { position : absolute ; background-color : #FFFFFF ;  z-index : 3 ; }
</ style >
< script  type ="text/javascript" >
function  isonWindow(aPars){
     this .aPars  =  aPars;
     if ( typeof  isonWindow._initialized  ==   " undefined " ){
        isonWindow.prototype.show  =   function (){
            _openWindow(aPars);
        }
        isonWindow.prototype.hide  =   function (){
            _closeWindow();
        }
        isonWindow._initialized  =   true ;
    }
}
// 打开弹出层
function  _openWindow(aPars){ 
     this .aPars  =  aPars;
     var  objLayout  =   $( " LayoutDIV " );
     var  objWindow  =   $( " WindowDIV " );
     var  objLock  =   $( " LockWindows " ); // 这个是用于在IE下屏蔽内容用
    objLock.style.display  =   " block " ;
//  当前页面大小：scrollHeight，scrollWidth
//  当前所显示的客户区的大小：clientWidth，clientHeight
     var  tWidth  =  document.body.scrollWidth;
     var  tHeight  =  document.body.scrollHeight;
     if (document.body.scrollWidth  <  document.body.clientWidth) tWidth  =  document.body.clientWidth;
     if (document.body.scrollHeight  <  document.body.clientHeight) tHeight  =  document.body.clientHeight;
    objLock.style.width  =  tWidth + " px " ;
    objLock.style.height  =  tHeight + " px " ;
     // alert(objLock.style.width+","+objLock.style.height);
    objLock.style.minWidth  =  tWidth + " px " ;
    objLock.style.minHeight  =  tHeight + " px " ;
//  判断输入的宽度和高度是否大于当前所显示的客户区的大小
     if (aPars.width > document.body.clientWidth) aPars.width  =  document.body.clientWidth;
     if (aPars.height > document.body.clientHeight) aPars.height  =  document.body.clientHeight;
    objLayout.style.display  =   " block " ;
//  弹出层的宽和高    
    objWindow.style.width  =  aPars.width + " px " ;
    objWindow.style.height  =  aPars.height + " px " ;
//  将弹出层垂直居中
    objWindow.style.marginLeft  =   - aPars.width / 2 + " px " ;
    objWindow.style.marginTop  =   - aPars.height / 2 + " px " ;
     // _displaySelect();
    document.location  =   " # " ;
     // _ajaxLoadWindow(aPars.par1,aPars.par2);
    _displaySelect();
}
// 关闭弹出层
function  _closeWindow(){
    $( " LockWindows " ).style.display  =   " none " ;
    $( " WindowDIV " ).innHTML  =   "" ;
    $( " LayoutDIV " ).style.display  =   " none " ;
     // _displaySelect();
}
// 隐藏下拉框，以解决下拉框优先度太高的问题，  
function  _displaySelect(){
     var  selects = document.getElementsByTagName( " select " ); // 整个页面的所有下拉框
     var  objWindow  =   $( " WindowDIV " );
     var  DIVselects  =  objWindow.getElementsByTagName( " select " ); // 整个弹出层的所有下拉框
     for ( var  i = 0 ;i < selects.length;i ++ ){
         if (selects[i].style.visibility){
            selects[i].style.visibility = "" ;
        } else {
            selects[i].style.visibility = " hidden " ;
             for ( var  j = 0 ; i < DIVselects.length; j ++ ){
                DIVselects[j].style.visibility = "" ;
            }
        }
    }
}
function  _ajaxLoadWindow(userID,url){
     var  pars  =   "" ;
    pars  =  ajaxaddpars_var( " userID " ,pars,userID);
     // pars = ajaxaddpars_formtext("sfz",pars,"sfz");
     // alert("pars2:"+pars);
    mynormalAjax(url,pars, " WindowDIV " );
     return   false ;
}
</ script >


<% /*==============================================================================
            以下是简单的使用例子
===============================================================================*/ %>
< script  type ="text/javascript" >
// 初始化参数
var  aPars  =  {
     ' width '             :  600 ,         // 弹出层的宽度
     ' height '         :  400 ,         // 弹出层的高度
     ' par1 '             :  '' ,         // 传入参数如用户ID
     ' par2 '             :  ' brtl '      // 传入ajax异步读取数据的调用页
     // 'css'            : ''        //弹出层的相关样色，如 blueStyle ，等价于 class="blueStyle"
};
var  oWindow  =   new  isonWindow(aPars); // 初始化弹出层对象
</ script >

< input  class ="btn"  type ="button"  onclick ="oWindow.show()"  value ="test"   />

< div  id ="LockWindows" > &nbsp; </ div >
< div  id ="LayoutDIV" >< div  id ="WindowDIV" >      
    ----用于显示弹出层的内容 < br  />< br  />
    123 < input  class ="btn"  type ="button"  onclick ="oWindow.hide()"  value ="close"   />
</ div ></ div >

 

donny.js（这是玲玲针对prototype.js脚本库修改的异步读取数据函数，我用了很长一段时间，感觉很好，所以推荐给大家。）

//  JavaScript Document
// ==============================================================================
/*                 Ajax  公用调用函数,一般情况下都可以使用
    建档时间：2007-4-30
    最后修改时间：2007-4-30
    作者：玲玲    bbs.jkid.com.cn
    说明：
        进行异步读取数据使用。只要传入3个参数即可
        url为数据来源的网页地址
        pars为需要传递的参数组成的字符串，格式和url地址栏参数一样
        （参数必须使用Ajaxaddpars_XXXX系列函数进行组合）
        div为DOM元素的id，用于装载返回数据的容器
    建议：
        以下函数一般不要作任何修改
*/// ============================================================================
function  mynormalAjax(url,pars,div){
    setStatusBar( " 正在连接数据库...... " );
     var  myAjax  =   new  Ajax.Updater(
                        {success: div},
                        url,
                        {
                            method:  ' post ' ,
                            parameters: pars,
                            evalScripts:  true ,
                            onFailure: reportError,
                            onSuccess: reportSuccess
                        }
                    );
     return   false ;
}
// ==============================================================================
/*                 Ajax 公用错误回调函数,可以定义错误时的事件
    建档时间：2007-4-30
    最后修改时间：2007-4-30
    作者：玲玲    bbs.jkid.com.cn
    说明：
        在mynormalAjax(url,pars,div)函数中的onFailure事件和onSuccess事件中调用
        也可以自行调用
    建议：
        以下函数一般不要作任何修改
*/// ============================================================================
function  reportError(request){
    alert( ' 很抱歉，不能读取数据，请稍后再试！ ' );
    setStatusBar( " 数据库连接失败... " );
}
function  reportSuccess(request){
    setStatusBar( " 数据更新成功~ " );
}
// 添加脚本变量的值
function  ajaxaddpars_var(argname,pars,var_value){
     if (var_value != null   &&  var_value != "" ){
         if (pars != "" ) pars  +=   " & " ;
        pars  +=  argname  +   " = "   +  mycommonfilt(encodeURI(var_value));
    }
     return  pars;
}

 

用到的脚本库

prototype.js

myAjax.js