DivCovoerSelect

原创于 2009-12-31 22:21:24 发布 · 121 阅读

CC 4.0 BY-SA版权

文章标签：

<html>   
<head>   
<script>   
function DivSetVisible(state)   
{   
    var DivRef = document.getElementById('PopupDiv');   
    var IfrRef = document.getElementById('DivShim');  
    var text1 = document.getElementById('text1'); 
    
    if(state){

            DivRef.style.width=text1.offsetWidth;
            DivRef.style.height=50;
            DivRef.style.top=text1.offsetTop+text1.offsetHeight;
            DivRef.style.left=text1.offsetLeft;
            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>
    <input type="text" id="text1" value="aaaaaaaaaa"/>

    <div   
        id="PopupDiv"  
        style="position:absolute;
        top:25px; 
        left:50px;
        padding:4px; 
        display:none;
        background-color:#FFFFFF; 
        color:#000000;
        z-index:100">   
        and a DIV can cover it up<br/>through the help of an IFRAME.   
    </div>

    <br>
    <select>   
    <option>A Select Box is Born ....</option>
    </select> 
    <br>
    <select>   
    <option>A Select Box is Born ....</option>
    </select>
    
</form>   


<iframe   
    id="DivShim"  
    src="javascript:false;"  
    scrolling="no"  
    frameborder="0"  
    style="position:absolute; top:0px; left:0px; display:none;">   
</iframe>

<br>
<br>
<br>
<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>