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.
<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