Bootstrap 4 with remote Modal

Question

I can't make the Modal work in the remote mode with the new Twitter Bootstrap release : Bootstrap 4 alpha. It works perfectly fine with Bootstrap 3. With bootstrap 4 I am getting the popup window, but the model body is not getting loaded. There is no remote call being made to myRemoteURL.do to load the model body.

Code:

<button type="button" data-toggle="modal" data-remote="myRemoteURL.do" data-target="#myModel">Open Model</button>  <!-- Model --> <div class="modal fade" id="myModel" tabindex="-1"     role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog">         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal"                     aria-label="Close">                     <span aria-hidden="true">&times;</span>                 </button>                 <h3 class="modal-title" id="myModalLabel">Model Title</h3>             </div>             <div class="modal-body">                 <p>                     <img alt="loading" src="resources/img/ajax-loader.gif">                 </p>             </div>             <div class="modal-footer">                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                 <button type="button" class="btn btn-primary">Submit</button>             </div>         </div>     </div> </div> 

Answer 1

Found the problem: They have removed the remote option in bootstrap 4

remote : This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

I used JQuery to implement this removed feature.

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

Answer 2

According to official documentation, we can do the follow(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) }) 

So, I believe this is the best approach (works for BS 5 too):

<!-- Button trigger modal --> <a data-bs-toggle="modal" data-bs-target="#modal_frame" href="/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 is the anchor() that triggers the modal.

Adapt to your needs