Tengo una ventana emergente y estoy configurando la ventana oculta en css de esta manera cuando inicializo la ventana:
#popper-container1 { width: 250px; max-width: 100%; position: absolute; left: 0; top: 0; touch-action: none; transition: opacity 0.2s; background-color: #f5f8fa; visibility: hidden; }después de hacer clic en algún botón, muestre esta ventana usando un código js como este:
export async function showTranslateResultPanel(translation: string) { let translateBtn = document.getElementById("popper-container1"); if (translateBtn) { translateBtn.style.visibility = "visible"; translateBtn.style.zIndex = "999999999"; translateBtn.style.position = "absolute"; let xAxios = await LocalStorage.readLocalStorage("pop-window-x-axios"); let yAxios = await LocalStorage.readLocalStorage("pop-window-y-axios"); translateBtn.style.transform = "translate(" + (xAxios) + "px," + (yAxios) + "px)"; setTransResult(translation); } }Cuando el usuario cierra la ventana emergente, estoy usando este código para eliminar el elemento:
export function closePopupWindow() { let translateBtn = document.getElementById("reddwarf-translate-app"); if (translateBtn) { translateBtn.remove(); } } la reddwarf-translate-app era el elemento principal de popper-container1 , cuando se eliminó el elemento principal, también se eliminó el subelemento. Pero me enfrento al problema de que la próxima vez que inicie la ventana emergente, la ventana se mostraba de forma predeterminada, ¡lo oculto se anuló! ¿por qué pasó esto? que debo hacer para que funcione? Revisé mi código y lógica y no encontré ningún problema, ¿por qué el oculto no hizo efecto cuando la segunda vez que abrí la ventana emergente? ¿La función de eliminación realmente elimina el elemento? o no elimino el css?
Sin un ejemplo reproducible mínimo , no puedo garantizar que esto funcione, pero probablemente esté configurando la pantalla después de ocultarla, lo que anula la fuente de atributo .remove () / oculto, intente configurar la pantalla en ninguno en lugar de usar
translateBtn.style.setProperty("display","none","important")lo que resultará en la misma experiencia de usuario que
translateBtn.remove();pero no se puede anular