css+javascript實現透明浮動層的覆蓋

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

最近在網上看到一個css+javascript實現透明浮動層的覆蓋的例子，發覺按照他的方法有一點小bug，因此改了一下，現在沒有問題了~~如果這代碼你是原作人，原諒我修改了你的代碼，大家都是為了學習而交流~~
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> </title>
<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");[color=#99CC00]//整個頁面的所有下拉框
var objWindow = document.getElementById("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="";
}
}
}
}
這裡我個人認為可以不用的~~

[/color]
function openWindows(width,height){
var objWindow = document.getElementById("WindowDIV");
var objLock = document.getElementById("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;
if(height > document.body.clientHeight)
height = document.body.clientHeight;
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>
</head>

</html>

註：Firefox也可以用，但沒有置中效果，如果你知道如何在Firefox中也實現置中的話請指教。謝謝！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More