Como colocar o conteúdo de outra página dentro de um modal? js

Eu tenho a página: index.html, eu queria trazer outras páginas para dentro dela, e colocar o conteudo dessas outras páginas dentro de um modal. Por exemplo: eu tenho um carousel de icons e gostaria de que quando clicasse em um icon, um modal abrisse e dentro desse modal tivesse o contéudo de outra página, só que cada icon tem sua página diferente. Eu consegui trazer o conteúdo das outras página para o index.html. Mas não estou conseguindo colocar dentro do modal.

index.html

<div class="carousel">
<div><a href="outra/1.html"><img src="img/icons/1.png" class="rounded-circle"></a></div>
<div><a href="outra/2.html"><img src="img/icons/2.png" class="rounded-circle"></a></div>
<div><a href="outra/3.html"><img src="img/icons/3.png" class="rounded-circle"></a></div>
</div>

<div class="modal fade bd-example-modal-xl" tabindex="-1" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content" id="conteudo">

</div>
</div>

<script>
document.querySelectorAll(''''a'''').forEach(link => {
const conteudo = document.getElementById(''''conteudo'''')
link.onclick = function(e) {
e.preventDefault()

fetch(link.href)
.then(resp => resp.text())
.then(html => conteudo.innerHTML = html)
}
})