點擊一個按鈕覆蓋另一個div

我有兩個可視化對象，每個都在不同的div中。我想將一個div放在另一個div上按鈕單擊以覆蓋並比較它們。然後，在另一個按鈕上點擊，我想分離出來。任何代碼片段或鏈接將不勝感激。現在我只是想利用以下javascript函數：點擊一個按鈕覆蓋另一個div

function ShowOverlay(divID, xCoordinate, yCoordinate) {  
    var divObject = document.getElementById(divID);  
    divObject.style.visibility = "visible";  
    divObject.style.left = xCoordinate;  
    divObject.style.top = yCoordinate;  
}

來源

2013-04-23 Vindy

理想的解決方案取決於div層的HTML，用於覆蓋該div的HTML，如果包裝有一個，當然還有一些重要的CSS讓他們在默認狀態下。因爲理想的解決方案可能像'[overlay div] .style.position =「absolute」'一樣簡單。 – 2017-10-29 10:51:49

您應該使用絕對或相對定位。

如果您position屬性未設置爲absolute或relativestyle.left和style.top不會有任何效果。

下面將允許他們繼續前進（你只需要座標計算出：

function ShowOverlay(divID, xCoordinate, yCoordinate) { 

    var divObject = document.getElementById(divID); 

    divObject.style.visibility = "visible"; 
    divObject.style.left = xCoordinate; 
    divObject.style.top = yCoordinate; 
    divObject.style.position = "absolute"; 

}

要取消它，簡單的設置位置回靜：

divObject.style.position = "static";

來源

2013-04-23 22:15:39 Kenneth

它仍然不動。覆蓋類是和新座標是100和200 – Vindy 2013-04-23 22:29:33

您能告訴我您正在使用的完整HTML和Javascript嗎？ – Kenneth 2013-04-23 22:30:50

當然。 http://pastie.org/7705678（不同部分顯示我的問題的相關部分 - divOverlay類，JS疊加功能，然後如果向下滾動，您將看到實際的div類和按鈕。謝謝 – Vindy 2013-04-23 22:35:43

這裏很簡單在點擊按鈕時移動三個div的工作示例 HTML代碼

<div class="container"> 
<div class = "circlea"><h2>link</h2></div> 
<div class = "circleb"><h2>link</h2></div> 
<div class = "circlec"><h2>link</h2></div> 
<button >click me</button> 
</div> 


.circlea,.circleb,.circlec{ 
height:150px; 
width:150px; 
border-radius:50%; 
margin-left:50%; 
margin-top:120px; 
position: absolute; 
transition: all 1s ease-in-out; 
opacity:0; 
color:white; 
text-align:center; 
} 

.circlea{ 
background-color:rgba(20, 155, 138); 
} 

.circleb{ 
background-color:rgba(155, 20, 144); 
} 

.circlec{ 
background-color:rgba(24, 155, 20); 
opacity:1; 
} 

button{ 
background-color:tomato; 
width:100px; 
padding:10px; 
color:white; 
} 

.transforma{ 
margin-left:200px; 
opacity:1; 
} 

.transformb{ 
    margin-left:800px; 
    opacity:1; 
} 

.transformb{ 
opacity:1; 
}

個

$("button").click(function(){ 

    $("div.circleb").toggleClass("transformb"); 
    $("div.circlea").toggleClass("transforma"); 

});

https://codepen.io/pranjalkoshti/pen/rYNQeL

來源

2017-10-29 08:29:56

點擊一個按鈕覆蓋另一個div

回答

相關問題