Buenas tardes!
Llego con un pedido de auxilio, estoy aprendiendo sobre fronend basico, y se me dio por intentar hacer un login en un modal con un html externo. Al desarrollar este modal.html (con un tuto) con su propio .css y .js, este funcionaba como se esperaba, pero al momento de llamarlo desde mi index.html, las funcionalidades quedaron en la nada.
Inicialmente, debia mostrarse asi:
con los botones registrarse/iniciar sesion que se muestran fuera del form, con la funcion de cambiar la vista. El form tenia validacion de campos, lo cual tambien dejo de funcionar (raro, ya que main.js tiene la misma funcion de validacion para un form interno).
Pero, como dije arriba, al llamar al modal desde mi index, solo abre el modal mostrando la primera imagen. Al inspeccionar la pagina, muestra el siguiente error :
Refused to apply style from 'No tienes permitido ver enlaces. Registrate o Entra a tu cuenta; because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
No estoy familiarizado con javascript, las siguientes funciones las compartio un compañero de curso:
Aclaro que mientras index permanece en la carpeta raiz, el resto de los archivos se encuentran en resources, incluyendo modal.html (siendo resources la nivel de index)
Código: html
Llego con un pedido de auxilio, estoy aprendiendo sobre fronend basico, y se me dio por intentar hacer un login en un modal con un html externo. Al desarrollar este modal.html (con un tuto) con su propio .css y .js, este funcionaba como se esperaba, pero al momento de llamarlo desde mi index.html, las funcionalidades quedaron en la nada.
Inicialmente, debia mostrarse asi:
con los botones registrarse/iniciar sesion que se muestran fuera del form, con la funcion de cambiar la vista. El form tenia validacion de campos, lo cual tambien dejo de funcionar (raro, ya que main.js tiene la misma funcion de validacion para un form interno).
Pero, como dije arriba, al llamar al modal desde mi index, solo abre el modal mostrando la primera imagen. Al inspeccionar la pagina, muestra el siguiente error :
Refused to apply style from 'No tienes permitido ver enlaces. Registrate o Entra a tu cuenta; because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
No estoy familiarizado con javascript, las siguientes funciones las compartio un compañero de curso:
Aclaro que mientras index permanece en la carpeta raiz, el resto de los archivos se encuentran en resources, incluyendo modal.html (siendo resources la nivel de index)
function cargarModal() {
fetch('resources/modal.html')
.then(response => {
if (!response.ok) {
throw new Error('Error al cargar modal.html');
}
return response.text();
})
.then(html => {
const modalPlaceholder = document.getElementById('modal-placeholder');
modalPlaceholder.innerHTML = html;
// Crear el enlace al archivo CSS
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'resources/modal.css';
link.onload = function() {
// Solo inicializar el modal después de que el CSS se haya cargado
inicializarModal();
};
// Manejar errores de carga del CSS
link.onerror = function() {
console.error('Error al cargar modal.css');
};
document.head.appendChild(link);
})
.catch(error => {
console.error('Error al cargar modal.html:', error);
});
}
function inicializarModal() {
function abrirModal() {
var modal = document.getElementById('myModal');
if (modal) {
modal.style.display = 'block';
} else {
console.error('No se encontró el modal #myModal.');
}
}
var closeModal = document.querySelector('.close');
if (closeModal) {
closeModal.addEventListener('click', function() {
var modal = document.getElementById('myModal');
if (modal) {
modal.style.display = 'none';
} else {
console.error('No se encontró el modal #myModal para cerrar.');
}
});
} else {
console.error('No se encontró ningún elemento con la clase "close" para cerrar el modal.');
}
window.addEventListener('click', function(event) {
var modal = document.getElementById('myModal');
if (modal && event.target === modal) {
modal.style.display = 'none';
}
});
const signInUpButton = document.getElementById('sign-in-up');
if (signInUpButton) {
signInUpButton.addEventListener('click', function() {
abrirModal();
});
} else {
console.error('No se encontró el botón #sign-in-up.');
}
}
cargarModal();
