时间戳

首页 > 解决方案 > 如何将弹出窗口移近按钮？

javascript - 如何将弹出窗口移近按钮？

问题描述

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

标签： javascriptcssreactjsdrag-and-drop

解决方案

您可以使用rightandbottom定位，而不是topand 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);
}

推荐阅读