Can I get Bootstrap modal content to generate a new url? - html

Question

I'm in the process of adding Facebook like and share buttons to a site I'm working on. What I'm trying to achieve is to have L+S buttons for each item in the portfolio, which are displayed as modal content when a thumbnail is clicked. What is currently happening is that the links to like or share don't include the modal id, which means the whole portfolio page is linked, rather than a specific item.
The html for the thumbnails looks like this:
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<img class="img-responsive img-portfolio img-hover" src="img/homePage/700x450alfa.png" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
</a>
</div>
And that links to this:
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Alfa</h2>
<p class="item-intro text-muted">38mm Nordic Spruce</p>
<p>Choose your own name, word or design to be cut from wood. Get in touch to discuss an order like this one</p>
<img class="img-responsive img-centered" src="img/may2017/alfa1.jpg" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
<img class="img-responsive img-centered" src="img/may2017/alfa2.jpg" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
<img class="img-responsive img-centered" src="img/may2017/alfa3.jpg" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Window</button>
<!--LIKE BUTTON-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<br> </br>
<div class="row text-center">
<div class="fb-like" data-href="https://localhost:8888/TTK2/mainportfolio2.html#portfolioModal1" data-width="200px" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see, I've pasted the FB JS right into the div, which I know is poor practice, but I had hoped that this would trigger the modal ID, but it doesn't.
You can also see that I've got the full address including the modal ID in the data-href field of the button div, but any link generated by clicking will not include the modal ID, and instead links to the original page, in this case, Portfolio. BTW, the buttons for the entire page work as they should. The only thing I can't do is link to a modal. Documentation I've read suggests that it might not be possible to do this, but I wanted to check with the community first. I mean, it SHOULD be possible, right?
Ps. I know this code links to a local host address, but it doesn't work in a live situation either.
Thanks for looking.
UPDATE - SOLVED.
I've found a solution to the first part of this, which was being able to change the url of modal content so that I could add Like and Share buttons. It has been answered Here by #forcefield. Have tested on my page of 100+ hidden modal divs and it works perfectly. Thanks #forcefield!