Closing bootbox alert on href link click

Question

I am using bootbox alert in my angular2 application to display information to the user on the UI. I am displaying href links in the alert message. When the user clicks on any of the href links, the page should be navigated to that link and also the bootbox alert modal should get closed.

In my code, the page is navigated to the href link. However, the modal is not getting closed. How can i achieve this? Below is my code:

bootbox.alert({
      title: "Select option for profile #"+this.profileId,
      message:
      "<a href=\"#/profile-details/"+this.profileId+"\">View/Update</a><br>" +
      "<a href=\"#/status-update/"+this.profileId+"/"+this.status+"\">Deactivate/Reactivate</a><br>"+
      "<a href=\"#/adhoc-request/"+this.profileId+"/"+this.status+"\">Ad Hoc Request</a><br>"+
      "<a href=\"#/internal-resend/"+this.profileId+"\">Internal Download</a><br>"+
      "<a href=\"#/audit-tracking/"+this.profileId+"\">Audit Tracking</a><br>"
    });

Any inputs appreciated!

Answer 1

You can capture the modal object that is created (see https://jsfiddle.net/q1Lm385a/1/):

var $mymodal = bootbox.alert({
  title: "Select option for profile #"+this.profileId,
  message:
  "<a href=\"#/profile-details/"+this.profileId+"\">View/Update</a><br>" +
  "<a href=\"#/status-update/"+this.profileId+"/"+this.status+"\">Deactivate/Reactivate</a><br>"+
  "<a href=\"#/adhoc-request/"+this.profileId+"/"+this.status+"\">Ad Hoc Request</a><br>"+
  "<a href=\"#/internal-resend/"+this.profileId+"\">Internal Download</a><br>"+
  "<a href=\"#/audit-tracking/"+this.profileId+"\">Audit Tracking</a><br>"
});

That would make it relatively easy to manually dismiss the modal:

$mymodal.on('click', '.bootbox-body a', function(e){
    $mymodal.modal('hide');
});

Bootbox also has a global function you can call:

$mymodal.on('click', '.bootbox-body a', function(e){
    bootbox.hideAll();
});