使用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类中的Position：absolute。

像这样 ：

.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元素（底部） ，您需要使用CSS的z-index功能。 同样，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
}

您可以根据需要更改这三个元素。