Bootstrap 4 Modal Popup Remote URL - Javascript

Introduction

When developing a website with dynamic content, it is sometimes necessary to load data from a remote URL and display it in a modal popup on the page. Bootstrap 4 provides the necessary tools to achieve this with ease. In this tutorial, we will discuss how to create a Bootstrap 4 modal popup that loads data from a remote URL using Javascript.

Prerequisites

Before we begin, it is assumed that you have a working understanding of HTML, CSS, and Javascript. It is also assumed that Bootstrap 4 is already installed and configured in your project.

Steps

1. First, we need to create the modal HTML code. This can be done using the following code snippet:

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Remote Content</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        <p>Loading content...</p>
      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

2. Next, we add a button to the page that, when clicked, will trigger the modal popup. This can be done using the following code snippet:

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

3. Now, we need to add Javascript code that will load the content from the remote URL and display it in the modal popup. This can be done using the following code snippet:

$(document).ready(function(){
  $('#myModal').on('show.bs.modal', function (e) {
    var url = "https://www.example.com/remote-content.html";
    $.ajax({
      type: "GET",
      url: url,
      beforeSend: function(){
        $('.modal-body').html('<p>Loading content...</p>');
      },
      success: function(data){
        $('.modal-body').html(data);
      },
      error: function(jqXHR, textStatus, errorThrown){
        console.log(textStatus, errorThrown);
      }
    });
  });
});

4. Save all the changes and test the modal popup by clicking on the "Open Modal" button.

Conclusion

In this tutorial, we have discussed how to create a Bootstrap 4 modal popup that loads content from a remote URL using Javascript. By following these steps, you can easily incorporate dynamic content into your website and provide a better user experience for your visitors.