Bootstrap 5: Load Remote Content in Modal via URL

[abdulrazakshaikh]

I m trying to add a modal content via url using bootstrap 5 no jquery.

I have achieved in previous version of bootstrap using jquery with the below code.
`$('#mySmallModal').on('show.bs.modal', function (e) {
var link = $(e.relatedTarget);
var modal = $(this);
modal.find('.modal-content').load(link.attr("href"));

});`

[GeoSot]

const modal = document.querySelector('#mySmallModal');

modal.on('show.bs.modal', function (e) {
   const  link = e.relatedTarget.getAttribute('href');

   fetch(link).then(res => res.text()).then(html => {
     modal.querySelector('.modal-content').innerHtml = html
   });
});

I suppose something like this, could do the job 😉

[abdulrazakshaikh]

@GeoSot This Works for me

const modal = document.getElementById('exampleModal')
modal.addEventListener('show.bs.modal', function (event) {
    
  // event.preventDefault();
  const link = event.relatedTarget.getAttribute('href');
  const modalData = document.querySelector('.modal-data');

  fetch(link).then(res => res.text()).then(html => {
    modalData.innerHTML = html; 
  });
});