Bootstrap 4 con modal remoto

Solución:

Encontrado el problema: han eliminado la opción remota en bootstrap 4

remoto : Esta opción está obsoleta desde v3.3.0 y se eliminará en v4. En su lugar, recomendamos usar plantillas del lado del cliente o un marco de enlace de datos, o llamar a jQuery.load usted mismo.

Usé JQuery para implementar esta característica eliminada.

$('body').on('click', '[data-toggle="modal"]', function(){
        $($(this).data("target")+' .modal-body').load($(this).data("remote"));
    });  

Según la documentación oficial, podemos hacer lo siguiente (https://getbootstrap.com/docs/4.1/components/modal):

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('whatever') // Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text('New message to ' + recipient)
    modal.find('.modal-body input').val(recipient)
})

Entonces, creo que este es el mejor enfoque (también funciona para BS 5):

<!-- Button trigger modal -->
<a data-bs-toggle="modal" data-bs-target="#modal_frame" href="https://foroayuda.es/otherpage/goes-here">link</a>

<!-- Modal -->
<div class="modal fade" id="modal_frame" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <!-- Completes the modal component here -->
</div>

<script>
  $('#modal_frame').on('show.bs.modal', function (e) {
    $(this).find('.modal-body').load(e.relatedTarget.href);
  });
</script>

e.relatedTarget es el ancla () que activa el modal.

Adáptese a sus necesidades

Como indican algunas de las otras respuestas y documentos de Bootstrap, Bootstrap 4 requiere el manejo de la show.bs.modal evento para cargar contenido en el modal. Esto se puede usar para cargar contenido desde una cadena HTML o desde una URL remota. Aquí está un ejemplo de trabajo…

$('#theModal').on('show.bs.modal', function (e) {

    var button = $(e.relatedTarget);
    var modal = $(this);

    // load content from HTML string
    //modal.find('.modal-body').html("Nice modal body baby...");

    // or, load content from value of data-remote url
    modal.find('.modal-body').load(button.data("remote"));

});

Demostración de URL remota de Bootstrap 4

---

Otra opción es abrir el modal una vez que se devuelven los datos de una llamada Ajax …

  $.ajax({
       url: "http://someapiurl",
       dataType: 'json',
       success: function(res) {

           // get the ajax response data
           var data = res.body;
           // update modal content
           $('.modal-body').text(data.someval);
           // show modal
           $('#myModal').modal('show');

       },
       error:function(request, status, error) {
           console.log("ajax call went wrong:" + request.responseText);
       }
  });

Bootstrap 4 Load Modal de Ajax Demo

---

---

Utiliza Nuestro Buscador