如何將彈出窗口移近按鈕？

Question

jsfiddle： https ://jsfiddle.net/annahisenberg/ft10ersb/34/

現在我正在這樣做：

      <div
        id="more_options_popup"
        style={{
          left: this.reff.current.offsetLeft - 140 + "px",
          top: this.reff.current.offsetTop - 150 + "px"
        }}
      >

但是有沒有更動態的方法來做到這一點？ 因為這種方式在我的實際項目中不起作用。 如果我將offsetTop更改為- 130 ，它將使它更接近，但是如果該彈出窗口中有更多項目，它就太靠近我的按鈕了。 如果我的彈出窗口中只有一個<p>標簽，它離我的按鈕太遠了，但是如果我有一個以上的<p>標簽，它離我的按鈕太近了。

出於某種原因，我無法將其顯示在 jsFiddle 中。

反應代碼：

class Drag extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: this.props.x,
      y: this.props.y,
      showMoreOptionsPopup: false,
      showHelpModal: false
    };

    this.reff = React.createRef();

    this.dragMouseDown = this.dragMouseDown.bind(this);
    this.elementDrag = this.elementDrag.bind(this);
    this.closeDragElement = this.closeDragElement.bind(this);
    this.showMoreOptionsPopup = this.showMoreOptionsPopup.bind(this);
  }


  componentDidMount() {
    this.pos1 = 0;
    this.pos2 = 0;
    this.pos3 = 0;
    this.pos4 = 0;
  }

  dragMouseDown(e) {
    e.preventDefault();
    this.pos3 = e.clientX;
    this.pos4 = e.clientY;
    document.onmouseup = this.closeDragElement;
    document.onmousemove = this.elementDrag;
  };

  elementDrag(e) {
    e.preventDefault();
    this.pos1 = this.pos3 - e.clientX;
    this.pos2 = this.pos4 - e.clientY;
    this.pos3 = e.clientX;
    this.pos4 = e.clientY;
    this.setState({
      y: this.reff.current.offsetTop - this.pos2 + "px",
      x: this.reff.current.offsetLeft - this.pos1 + "px"
    });
  };

  closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  };

  showMoreOptionsPopup() {
    this.setState({
      showMoreOptionsPopup: !this.state.showMoreOptionsPopup
    });
  };

  render() {  
    const { showHelpModal, documents, showMoreOptionsPopup, x, y } = this.state;
    const { menuNameHelp } = this.props;

    return (
    /* jshint ignore:start */
      <div>
        {showMoreOptionsPopup && (
          <div
            id="more_options_popup"
            style={{
              left: this.reff.current.offsetLeft - 140 + "px",
              top: this.reff.current.offsetTop - 150 + "px"
            }}
          >
            <div className="help-popup-grid">
              <p>Help</p>
              <p>Contact</p>
            </div>
          </div>
        )}


            <a
                id="more_options_button"
                className={showMoreOptionsPopup ? 'open' : null}
                onClick={this.showMoreOptionsPopup}
                style={{ left: x, top: y }}
                onMouseDown={this.dragMouseDown}
                ref={this.reff}
            >
              <div></div>
            </a>
      </div>
      /* jshint ignore:end */
    );
  }
}
ReactDOM.render(
    /* jshint ignore:start */
    <Drag />, 
  document.querySelector("#app")
  /* jshint ignore:end */
 )

CSS：

#more_options_button {
  width: 1%;
  position: absolute;
  right: 0;
  bottom: 155px;
  right: 60px;
  width: 60px;
  height: 43px;
  width: 43px;
  border-radius: 50% !important;
  background-color: black;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  color: white;
}

#more_options_popup {
    position: absolute;
    text-align: right;
    z-index: 9999;
    width: 10%;
    border: 1px solid black;
    border-radius: 10%;
    padding-top: 1rem;
    background: white;
    z-index: 9999;
}  

Answer 1

您可以使用right和bottom定位，而不是top和left 。 我試過了，似乎應該可以。 示例： https : //jsfiddle.net/0ub8jhxa/

更新另一種方法是將彈出窗口放在a標簽中。 在這種情況下，您可以使用相對定位。 您的彈出框將相對於您的a標簽放置。 例子：

a {
  position: relative; /* or absolute */
}
a > div.popover {
  position: absolute;
  top: calc(100% - 20px);
  left: calc(100% - 20px);
}