css弹出层+屏蔽背景页面(兼容fiefox) (转)

转自:http://blog.csdn.net/isonchen/archive/2007/07/11/1685770.aspx

1. 只想弹出一个能居中的层
2. 能有屏蔽背景页面并且是半透明效果
3. 能解决下拉框优先度太高的问题

今天用了一个下午的时间整理，把这3个问题都解决了，而且用的是最简洁的代码实现，而且兼容IE和Firefox浏览器，因此，当我完成这个的时候，真的很高兴，希望能对大家有帮助。

<% @ page contentType = " text/html; charset=utf-8 "  language = " java "  import = " java.sql.* "  errorPage = ""   %>
<% /*
            通用弹出层页面(兼容IE、firefox)
    作者：陈满森
    创建时间： 2007 - 7 - 11         最后修改时间： 2007 - 7 - 11
    说明：
         1 .openWindows(width,height) ---- 打开弹出层调用的函数，可控制层的宽度和高度
         2 .hiddenWindows() ---- 关闭弹出层调用函数
         3 ._displaySelect() ---- 隐藏下拉框标签，因为它的优先度太高
         4 . < div id = " LockWindows " >---- 用于实现屏蔽弹出层以下的页面
         5 . < div id = " WindowDIV " >---- 用于显示弹出层的内容
    例子(空格自己去掉)：
        在需要弹出层的页面引用 <  %@ include file = " ../common/common_openWindows.jsp " %  >
         <  input type = " button "  onclick = " openWindows('800','700'); "  value = " 编辑 "   /   >
         <  input type = " button "  onclick = " hiddenWindows(); "  value = " 关闭 "   /   >
*/ %>
< style  type ="text/css" >
#LockWindows {
    position : absolute ;  top : 10px ;  left : 10px ;  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') ;
}
#WindowDIV { position : absolute ;  z-index : 3 ;  background-color : #FFFFFF ;  border : #000000 solid 1px ;  display : none ; }
</ style >
< script  type ="text/javascript" >
// 隐藏下拉框，以解决下拉框优先度太高的问题，  
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  openWindows(width,height){ 
     var  objWindow  =   $( " WindowDIV " );
     var  objLock  =   $( " LockWindows " ); // 这个是用于在IE下屏蔽内容用
    objLock.style.display = " block " ;
    objLock.style.width = document.body.clientWidth + " px " ;
    objLock.style.height = document.body.clientHeight + " px " ;
    objLock.style.minWidth = document.body.clientWidth + " px " ;
    objLock.style.minHeight = document.body.clientHeight + " px " ;
//  判断输入的宽度和高度是否大于当前浏览器的宽度和高度
     if (width > document.body.clientWidth) width  =  document.body.clientWidth + " px " ;
     if (height > document.body.clientHeight) height  =  document.body.clientHeight + " px " ;
    objWindow.style.display = ' block ' ;
    objWindow.style.width  =  width + " px " ;
    objWindow.style.height  =  height + " px " ;
//  将弹出层居中
    objWindow.style.left = (document.body.offsetWidth - width) / 2 + " px " ;
    objWindow.style.top = (document.body.offsetHeight - height) / 2 + " px " ;
    _displaySelect();
}
function  hiddenWindows(){
    $( " LockWindows " ).style.display = ' none ' ;
    $( " WindowDIV " ).style.display = ' none ' ;
    _displaySelect();
}
</ script >

< div  id ="LockWindows" > &nbsp; </ div >
< div  id ="WindowDIV" >      
     <% @ include file = " ../examination/openEditerDiv.jsp " %>
</ div >

 

 

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1729504