Всплывающее окно с использованием 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-индекс свойства для вашего всплывающего окна. И Удалить позицию: абсолютная в классе .popup ..

Like This:

.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 
} 

Вы можете изменить эти три элемента согласно вашему требованию.