1

Estoy intentando con este código mostrar en una modal el contenido de una página completa presionando un link:

<div class="bs-example">
    <a href="test.html" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Launch Demo Modal</a>
    <div id="myModal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- Content will be loaded here from "test.html" file -->
            </div>
        </div>
    </div>
</div>

test.html contiene el siguiente código javascript y css:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap" rel="stylesheet">

    
    <link rel="stylesheet" href="fonts/icomoon/style.css">
  
    <link href='fullcalendar/packages/core/main.css' rel='stylesheet' />
    <link href='fullcalendar/packages/daygrid/main.css' rel='stylesheet' />
    
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <!-- Style -->
    <link rel="stylesheet" href="css/style.css">

    <title>Calendar #9</title>
  </head>
  <body>
  
  <div class="content">
    <div id='calendar'></div>
  </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src='fullcalendar/packages/core/main.js'></script>
    <script src='fullcalendar/packages/interaction/main.js'></script>
    <script src='fullcalendar/packages/daygrid/main.js'></script>
    <script>
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    var yyyy = today.getFullYear();

    today = yyyy + '-' + mm + '-' + dd;
    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
      defaultDate: today,
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      locales: 'es',
      header : {
      left:   'title',
      center: '',
      right: ''
      },
      columnHeaderFormat: { weekday: 'long' }
    }
    );

    calendar.render();
  });

    </script>

    <script src="js/main.js"></script>
  </body>
</html>

Por alguna razón no carga test.html en la modal, qué estaré haciendo mal? necesito mostrar el calendario desde la modal, también estoy abierto a otras soluciones que hagan algo parecido. He cambiado el código de test.html por un Hola Mundo y lo muestra, al parecer problema de las librerías de css y javascript.

3
  • Un modal no es un iframe, no es recomendable ponerle etiquetas tipo <html>, <head>, <body> ni tampoco <script> ni nada que pueda ir en un head. Si dices que consigues un "hola mundo" pero no eso prueba quitando primero todo lo que he dicho y ves pensando como meter los scripts de otra forma, que las hay, seguramente con un getScript() o parecidos, o bien ya los dejas cargados desde el inicio antes de llamar al modal
    – masterguru
    Commented el 18 mar. 2022 a las 13:12
  • @masterguru gracias, voy a intentar llamar las librerias desde la pagina donde llamo la modal, usar un iframe es recomendable? Commented el 18 mar. 2022 a las 13:15
  • El uso de iframes es cuestionable, al menos desde mi opinión yo nunca los uso y cuando me encuentro alguno tampoco me convencen... diria que cada vez más estan en desuso porque ahora muchas webs ya saben protegerse mejor y no los permiten (muchos las usaban para cargar otras webs dentro de la suya).
    – masterguru
    Commented el 18 mar. 2022 a las 13:50

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.