在右侧对齐弹出窗口

如何解决在右侧对齐弹出窗口

我的购物车有一个弹出组件。 当我点击 btn 时，我想从右侧打开弹出窗口。现在它在窗口中间打开。在这里我附上了我的组件和它的 css。要打开我的模态，我只使用 onClick 事件和 React hook 作为位于另一个文件夹中的 useState。

const Loginpopup = ({ active,setActive,children }) => (
  <div
    className={active ? "popup-cart active" : "popup-cart"}
    onClick={() => setActive(false)}
  >
    <div
      className={active ? "popup-content-cart active pt-cart" : "popup-content-cart"}
      onClick={(e) => e.stopPropagation()}
    >
      <button type="button" className="close" onClick={() => setActive(false)}>
        <img src={closeIcon} alt="close" />
      </button>
      {children}
    </div>
  </div>
);
export default Loginpopup;

.popup-cart {
    height: 100%;
    width: 100%;
    background-color: rgba(0,0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.5s;
    pointer-events: none;
  }
  
  .popup-cart.active {
    opacity: 1;
    pointer-events: all;
  }
  
  .popup-content-cart {
    margin: 0 auto;
    padding: 40px;
    height: 387px;
    width: 400px;
    border-radius: 12px;
    background-color: #fff;
    transform: scale(0.5);
    transition: 0.4s all;
  }
  
  .popup-content-cart.active {
    transform: scale(1);
  }
  
  .popup-content-cart .close img {
    display: block;
  }
  
  .popup-content-cart .close {
    position: absolute;
    right: 10px;
    top: 10px;
  }

现在它是一个小的弹出窗口。我可以固定它的宽度和高度。我只需要它在右侧对齐。 非常感谢您的任何建议和建议:)