使用JavaScript和css彈出窗口

Question

如圖所示，當我點擊hello（平面幾何）時創建了一個彈出窗口，但彈出窗口 出現在屏幕的最左端，我不知道如何使其顯示在平面幾何框 有人可以請幫我如何解決這個問題。我也上傳了代碼。

function onDocumentMouseDown(event) { 
    event.preventDefault(); 
    mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mouse.y = -(event.clientY/window.innerHeight) * 2 + 1; 
    raycaster.setFromCamera(mouse, camera); 
    var intersects = raycaster.intersectObjects(pickables); 
    if (intersects.length > 0) { 
    if (intersects[0].object.name === "plane") 
     window.open(intersects[0].object.userData.URL); 

    // alert ("plane"); 
    else if (intersects[0].object.name === "plane1") { 
     var popup = document.getElementById('myPopup'); 
     popup.classList.toggle('show'); 
    } 
    } 
} 

.popup { 
    position: absolute; 
    display: inline-block; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 
/* The actual popup */ 

.popup .popuptext { 
    visibility: hidden; 
    width: 160px; 
    background-color: #555; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 8px 0; 
    position: absolute; 
    z-index: 1; 
    bottom: 125%; 
    left: 50%; 
    margin-left: -80px; 
} 
/* Popup arrow */ 

.popup .popuptext::after { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: #555 transparent transparent transparent; 
} 
/* Toggle this class - hide and show the popup */ 

.popup .show { 
    visibility: visible; 
    -webkit-animation: fadeIn 1s; 
    animation: fadeIn 1s; 
} 
/* Add animation (fade in the popup) */ 

@-webkit-keyframes fadeIn { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 
@keyframes fadeIn { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 

Answer 1

如果我理解你的代碼正確，您在彈出窗口上使用絕對位置，但未給出任何座標，因此它位於屏幕的左上角

.popup { 
    position: absolute; 
    top: 50%; //place it where you want 
    left:50%; // place it where you want 
    display: inline-block; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

Answer 2

提供的Z-index屬性彈出窗口。在.popup類絕對..

像這樣：和刪除的位置

.popup { 
position: absolute; //Remove This position 
display: inline-block; 
cursor: pointer; 
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
z-index: 999999; // Add z-index 
} 

Position: absolute屬性指定位置相對於其首先定位（而不是靜態）的祖先元素

Answer 3

要顯示一個I元素（頂部）到II元素（底部），您需要使用z-index CSS的功能。此外z-索引應該是高然後底部元素。

除此之外，您的頂級元素的準確位置，意味着您要顯示的位置。

因此，您只需編輯像這樣你的CSS代碼：

.popup { 
    position: absolute; 
    display: inline-block; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    z-index: 99999; // should be high to bottom element 
    left: 50%; // your element aligned from left 
    top: 50%; // your element aligned from top 
} 

你可以改變這三個元素按您的要求。