首頁 > 其他

越級言事，DIV遮蓋select

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

<iframe src="javascript:false" style="position:absolute;visibility:inherit; top:45px; left:16px; width:200px;  height:70px;z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
在我們的div中加了這句話，浮動圖片有80%的部分可以顯示在select之上了。
經過一番調試，深深感慨，如果浮動廣告是矩形那該多好啊~~~~~~~~
最後仍沒解決問題，看看時間，已經三點半了。明天還有些事，今天不能把自己弄的太累呀~~~~
問題雖沒解決，但上網查了不少好方法。
網上答案挺多的，但大多數都是重複的。也不知是誰抄誰的。
於是我也抄些。嘿嘿！

網上方法無數，記了兩種印象深刻的方法。
DIV遮蓋select
1、找個後台，後台硬自己就跟著強了
2、背後陰別人，讓別人弱了，就顯得自己強了。

1.iframe來當作div的底
<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('PopupDiv');
var IfrRef = document.getElementById('DivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div id="PopupDiv" style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br/>through the help of an IFRAME.
</div>
<iframe id="DivShim" src="javascript:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br/>
<br/>
<a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br/>
<br/>
<a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>

2.隱藏下拉框

<script>
var HideElementTemp = new Array();
//點擊菜單時，調用此的函數,菜單對象
function cal_hideElementAll(obj){
            cal_HideElement("IMG",obj);
            cal_HideElement("SELECT",obj);
            cal_HideElement("OBJECT",obj);
            cal_HideElement("IFRAME",obj);
}
function cal_HideElement(strElementTagName,obj){
try{
        var showDivElement = obj;
        var calendarDiv = obj;
        var intDivLeft = cal_GetOffsetLeft(showDivElement);
        var intDivTop = cal_GetOffsetTop(showDivElement);//+showDivElement.offsetHeight;
        //HideElementTemp=new Array()
        for(i=0;i<window.document.all.tags(strElementTagName).length; i++){
var objTemp = window.document.all.tags(strElementTagName)[i];
if(!objTemp||!objTemp.offsetParent)
         continue;
var intObjLeft=cal_GetOffsetLeft(objTemp);
var intObjTop=cal_GetOffsetTop(objTemp);
if(((intObjLeft+objTemp.clientWidth)>intDivLeft)&&
        (intObjLeft<intDivLeft+calendarDiv.style.posWidth)&&
        (intObjTop+objTemp.clientHeight>intDivTop)&&
        (intObjTop<intDivTop+calendarDiv.style.posHeight)){
         //var intTempIndex=HideElementTemp.length;//已經有的長度
      //save elementTagName is stutas
         //HideElementTemp[intTempIndex]=new Array(objTemp,objTemp.style.visibility);
         HideElementTemp[HideElementTemp.length]=objTemp
         objTemp.style.visibility="hidden";
            }
        }
}catch(e){alert(e.message)
}
}

function cal_ShowElement(){
        var i;
        for(i=0;i<HideElementTemp.length; i++){
var objTemp = HideElementTemp[i]
if(!objTemp||!objTemp.offsetParent)
         continue;
objTemp.style.visibility=''
        }
        HideElementTemp=new Array();
}
function cal_GetOffsetLeft(src){
        var set=0;
        if(src && src.name!="divMain"){
            if (src.offsetParent){
               set+=src.offsetLeft+cal_GetOffsetLeft(src.offsetParent);
}
if(src.tagName.toUpperCase()!="BODY"){
         var x=parseInt(src.scrollLeft,10);
         if(!isNaN(x))
                set-=x;
}
        }
        return set;
}

function cal_GetOffsetTop(src){
        var set=0;
        if(src && src.name!="divMain"){
            if (src.offsetParent){
                set+=src.offsetTop+cal_GetOffsetTop(src.offsetParent);
       }
if(src.tagName.toUpperCase()!="BODY"){
         var y=parseInt(src.scrollTop,10);
         if(!isNaN(y))
      set-=y;
}
        }
        return set;
}

</script>
<select></select>
<select></select>
<div style="position:absolute;left:0;top:0;width:100;height:100;background-color:red" onclick="cal_hideElementAll(this)">
點擊讓select隱藏
</div>
<br><br><br><br><br><br>
<input type="button" value="點擊讓select顯示" onclick="cal_ShowElement()">

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

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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