Consulta sobre abrir un modal desde html externo

Chaffs · Julio 11, 2024, 04:34:22 PM

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

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();

pd: aunque estoy en proceso de rendirme con el modal y hacer que el login sea otra pagina del sitio, me gustaria saber la razon del porque dejo de funcionar el modal al ser implementado en index

Consulta sobre abrir un modal desde html externo

Chaffs

Julio 11, 2024, 04:34:22 PM Ultima modificación: Julio 12, 2024, 06:09:53 PM por blackdrake