Hola a todos estoy tratando de hacer modales y dropdown en Angular, hice un archivo .js que leo desde mi index.html, pero necesita el window.onload para funcionar, el tema que cuando se recarga la pagina funciona, pero si cierro sesion o cambio de ruta y regreso ya no funciona mas el modal o dropdown, a que se debe?? habra alguna solucion?? o alguna forma de pasar este codigo de mi modal a mi componente?
window.onload = function () {// No Sirve Onload
var openmodal = document.querySelectorAll(".modal-open");
for (var i = 0; i < openmodal.length; i++) {
openmodal[i].addEventListener("click", function (event) {
event.preventDefault();
toggleModal();
});
}
const overlay = document.querySelector(".modal-overlay");
overlay.addEventListener("click", toggleModal);
var closemodal = document.querySelectorAll(".modal-close");
for (var i = 0; i < closemodal.length; i++) {
closemodal[i].addEventListener("click", toggleModal);
}
document.onkeydown = function (evt) {
evt = evt || window.event;
var isEscape = false;
if ("key" in evt) {
isEscape = evt.key === "Escape" || evt.key === "Esc";
} else {
isEscape = evt.keyCode === 27;
}
if (isEscape && document.body.classList.contains("modal-active")) {
toggleModal();
}
};
function toggleModal() {
const body = document.querySelector("body");
const modal = document.querySelector(".modal");
modal.classList.toggle("opacity-0");
modal.classList.toggle("pointer-events-none");
body.classList.toggle("modal-active");
}
};
window.onload
,querySelectorAll
,getElementById
, estas cosas no tienen absolutamente nada que hacer en una aplicación Angular.