从开放点原点开始的模态比例

问题描述

运动创建模态窗口。在这里，我得到了我赢得的规格。 模态叠加-淡入 模式对话框-放大（从打开按钮的位置开始） 我得到它的部分工作，但问题是当模式对话框的高度> 100vh 我正在计算按钮的y位置并将位置移动到这一点，但是当对话框大于100vh时，它将无法正常工作。 您有任何想法在对话框较大时计算位置吗？

模式索引

function handleInput(
  answerHandler: (answer: number | null) => void,value: number,event: React.MouseEvent
) {
  event.preventDefault();

  const parentEl = event.currentTarget.parentElement;
  const parentId = parentEl.getAttribute("id");
  if (parentId) {
    const el = document.getElementById(parentId);
    if (el) {
      for (let i = 0; i < el.children.length; i++) {
        if (el.children[i].classList.contains("selected")) {
          el.children[i].classList.remove("selected");
        }
      }
    }
  }

  event.currentTarget.classList.add("selected");
  answerHandler(value);
}

模态样式的组件

import React,{ useEffect } from "react";

import {
  Close,ModalContainer,Overlay,ModalContent,InsideWrap,} from "./styled";
import { clearallBodyScrollLocks,disableBodyScroll } from "body-scroll-lock";
import Portal from "./portal";

const Modal = ({ toggle,children,buttonRef }) => {
  const modalRef = React.createRef();

  useEffect(() => {
    disableBodyScroll(modalRef);
  });

  console.log(window.innerHeight);
  console.log(buttonRef.current.getBoundingClientRect().height);
  console.log(buttonRef.current.getBoundingClientRect().y);

  const modalinitialResolver = button => {
    if (buttonRef.current.getBoundingClientRect().y >= window.innerHeight / 2) {
      return (
        button.current.getBoundingClientRect().y +
        button.current.getBoundingClientRect().height / 2 -
        window.innerHeight / 2
      );
    } else {
      return -(
        window.innerHeight / 2 -
        (button.current.getBoundingClientRect().y +
          button.current.getBoundingClientRect().height / 2)
      );
    }
  };

  const modalinitial = {
    x:
      buttonRef.current.getBoundingClientRect().x +
      buttonRef.current.getBoundingClientRect().width / 2 -
      window.innerWidth / 2,y: modalinitialResolver(buttonRef),};

  return (
    <Portal>
      <ModalContainer innerRef={modalRef} style={{}}>
        <InsideWrap>
          <Overlay
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{
              duration: 1,}}
          />
          <ModalContent
            initial={{
              scale: 0,y: modalinitial.y,}}
            animate={{ scale: 1,x: 0,y: 0 }}
            exit={{
              scale: 0,}}
            transition={{
              duration: 1,}}
          >
            <div className="w-100 d-flex justify-content-end">
              <Close
                onClick={() => {
                  toggle(false);
                  clearallBodyScrollLocks();
                }}
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20.39 20.39"
              >
                <title>close</title>
                <line
                  x1="16.39"
                  y1="16.39"
                  x2="4"
                  y2="4"
                  fill="none"
                  stroke="#000000"
                  strokeLinecap="round"
                  strokeMiterlimit="10"
                  strokeWidth="1"
                />
                <line
                  x1="4"
                  y1="16.39"
                  x2="16.39"
                  y2="4"
                  fill="none"
                  stroke="#000000"
                  strokeLinecap="round"
                  strokeMiterlimit="10"
                  strokeWidth="1"
                />
              </Close>
            </div>
            {children}
          </ModalContent>
        </InsideWrap>
      </ModalContainer>
    </Portal>
  );
};

export default Modal;

预先感谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）