Make any links in a Bootstrap modal open in a new window

Question

I have a page which loads content into a Bootstrap (3.3.7) modal window. The content in the majority of these modals features 1 or more links.

I want any link that the user clicks on, in these modals, to open up in a new browser tab.

I can get this working by putting a target="_blank" on each anchor, e.g.

<a href="http://www.google.com/" target="_blank">Link</a>

But this seems tedious as every time I output a link I have to add this tag.

Is there a way to just tell the browser to open any links found in a modal in a new window/tab?

I've searched around but most of the answers refer to loading the link inside the modal, which is not what I want to do here.

I also want the modal to remain un-touched, i.e. keep it open (don't close it), in the previous tab.

Write a little piece of JS code that adds the target attribute to all links inside the modal, and trigger it on the appropriate event (opening the modal, loading the data, whatever fits best.) — CBroe, Nov 28 '16 at 15:10

score 2 · Accepted Answer · answered Nov 28 '16 at 15:10

You can add the target attribute via jQuery targeting the elements:

$('#modal-name a').attr('target', '_blank');

Or you can bind an event to the anchors themselves using window.open():

$('#modal-name').on('click', 'a', function(event) {
    event.preventDefault();
    window.open($(this).attr('href'), '_blank');
});

1 Answers1