How to open all links in modal using Bootstrap

Question

I'd like to be able to open all links on a page in a modal.

Below is an example:

<a href="http://google.com.au">Google AU</a>
<a href-"http://google.com">Google US</a>
<a href="https://www.google.co.jp>Google JP</a>

I want these links to open a Bootstrap Modal iFrame, loading the href= website into the modal. We have hundreds of links on the home page (all within our own domain) that are currently opening in a new tab when clicked, but instead we want to be able to open them into a modal, similar to how MaterializeCSS does it:

<div aria-hidden="true" class="modal fade" id="rs1" role="dialog" tabindex="-1" style="display: none;">
    <div class="modal-dialog modal-full">
        <div class="modal-content">
            <iframe class="iframe-seamless" src="https://google.com.au" title="Google AU"></iframe>
        </div>
    </div>
</div>

Without coding in all the modal <div id="unique"> these links would not work, so is it possible to use Javascript to automatically make all links on the page open into the modal?

Thanks

this post might be helpful http://stackoverflow.com/questions/18378720/bootstrap-3-with-remote-modal — Kiran Shakya, Oct 19 '16 at 12:55
Seems like its deprecated as of v3.3. I've tried playing with the jQuery load as well without a lot of luck. This also seems promising http://stackoverflow.com/a/34513876/422687 @KiranShakya — Dean, Oct 19 '16 at 13:20

score 2 · Accepted Answer · answered Oct 19 '16 at 15:06

First you should create an empty modal, the content will be filled based on the link that is clicked. Following Javascript should help achieve this. I have not tested it but it should look something like this.

$('a').click(function() { 
   $('#myModal .modal-content').html('<iframe src="' + $(this).attr('href') + '"></iframe>'); 
   $('#myModal').modal('show');
});

How to open all links in modal using Bootstrap

1 Answers1