问题描述
在打开Edit Task的Modal的时候,有一个多余的空白modal同时也被打开了,并且点右上角的叉号可以把Edit Task窗口也关上。最开始没有这个问题,我给edit task窗口加了css,移动位置之后问题就出现了。
解决方法
我最开始看到这个空白窗口的名字叫div.modal
,我以为是创建edit task的modal的时候不小心继承了这个。但我把edit task modal重新声明,也没有解决问题。
我还尝试把.modal
置为透明,会使edit task modal也消失。
.modal {
display: none;
}
我一直觉得是因为我在新建modal的时候继承逻辑写错了,想了好久怎么改都改不对,才觉得有可能是css的问题。
解决方法是让背景的基础modal跟随edit task modal一起移动。把这段加在style.css
里就好了。
/* Ensure the modal container aligns with task-detail-modal */
.modal-container {
position: relative; /* Or fixed, if needed */
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
top: 0;
left: 0;
transform: none; /* Reset inherited transforms */
width: auto;
height: auto;
z-index: 1000;
background: transparent; /* Ensure no unwanted background */
}
/* Prevent base modal styles from interfering */
.modal-container > * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
评论
才刚开始学,很多东西没搞明白,这个小问题就卡了蛮久。