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

To 0要素（上）を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 
} 

あなたの要件ごとにこれら三つの要素を変更することができます。