How to customize the course Completion pop up

To customize the completion modal you can fetch the show event of the modal with Javascript* like this:
$('#tl-course-completed-modal').on('show.bs.modal', function (event) {  
  var modal = $(this);
});
Having the modal now you can modify it as you wish.
For example if you want to change the image in the modal (with an image accessible from an external url), you can do it this way:
$('#tl-course-completed-modal').on('show.bs.modal', function (event) {  
  var modal = $(this);
  modal.find('img').attr('src', 'url_to_image');
});
If you want to change the header:
$('#tl-course-completed-modal').on('show.bs.modal', function (event) {  
  var modal = $(this);
  modal.find('h1').html('This is a custom header');
});
If you want to change the subtitle:
$('#tl-course-completed-modal').on('show.bs.modal', function (event) {  
  var modal = $(this);
  modal.find('h2').html('This is a custom subtitle');
});
These of course can all be combined in one :
$('#tl-course-completed-modal').on('show.bs.modal', function (event) {  
  var modal = $(this);
  modal.find('img').attr('src', 'url_to_image');
  modal.find('h1').html('This is a custom header');
  modal.find('h2').html('This is a custom subtitle');
});
If you want to prevent the completion modal from showing:
$('#tl-course-completed-modal').on('show.bs.modal', function (e) {
  e.preventDefault();
});
* Javascript can be added in "Account & settings > Themes > Javascript" as explained here

Feedback and Knowledge Base