bootstrap 4 modal popup remote url

To create a Bootstrap 4 modal popup with a remote URL, you can follow these steps:

1. Add the necessary HTML structure for the modal:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Content will be loaded here -->
      </div>
    </div>
  </div>
</div>

1. Use JavaScript/jQuery to load the remote content into the modal body:

<script>
$(document).ready(function() {
  $('#myModal').on('show.bs.modal', function(e) {
    var url = 'https://example.com/remote-content.html'; // Replace with your remote URL
    $(this).find('.modal-body').load(url);
  });
});
</script>

Replace 'https://example.com/remote-content.html' with the actual URL of the content you want to load into the modal.

That's it! When the button is clicked, the modal will open and load the content from the specified URL into the modal body.

Please note that the above code assumes you have included the necessary Bootstrap 4 CSS and JavaScript files in your HTML document.

I hope this helps!