问题描述
我的购物车有一个弹出组件。 当我点击 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;
}
现在它是一个小的弹出窗口。我可以固定它的宽度和高度。我只需要它在右侧对齐。 非常感谢您的任何建议和建议:)
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)