How to open anchor in a modal window, not a new tab

Question

This site demos Social Sharing code such as 'share to Facebook'. Here, clicking the links on the left opens the sharing in a modal window. Their code:

<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>

I want a similar effect and I have the following anchor but this opens in a new tab. I want it to open in a modal window:

<a href="http://www.facebook.com/sharer.php?u=http://www.idybrand.com/" title="Share on Facebook" target="_blank" >
    <img alt="Share on Facebook" width="40" height="40" src="img/social_media/facebook.svg">
</a>

How can I achieve this please? Possibly using Bootstrap?

score 3 · Accepted Answer · answered Feb 07 '17 at 12:00

3

Replace your code with this::

<a href="http://www.facebook.com/sharer.php?u=http://www.idybrand.com/" title="Share on Facebook" target="popup" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.idybrand.com/','popup','width=600,height=600'); return false;">
<img alt="Share on Facebook" width="40" height="40" src="img/social_media/facebook.svg">
</a>

It will work..

answered Feb 07 '17 at 12:00

Rana Ghosh

4,514
5
23
40

Thanks. That's exactly what I was looking for! – Dave Chambers Feb 07 '17 at 12:07
@DaveChambers If it helped you please upvote the answer and accept it to help others. – Rana Ghosh Feb 07 '17 at 12:09
I can...in 4 seconds - just waiting ;-) – Dave Chambers Feb 07 '17 at 12:10

score 2 · Answer 2 · answered Feb 07 '17 at 11:59

2

You can use this. I hope it helps.

<a onclick="window.open('https://www.facebook.com/','mywindow','width=640,height=360')" href="javascript:void(0)"><button>Click FB</button></a>

answered Feb 07 '17 at 11:59

shahzeb akram

906
7
24

Thanks. That does work but I had to adapt the code slightly so I accepted Rana's answer as that was more 'ready to use'. But thank you for your help. I upvoted your answer – Dave Chambers Feb 07 '17 at 12:06
1

Happy Coding :) – shahzeb akram Feb 07 '17 at 12:07
@DaveChambers Thanks – Rana Ghosh Feb 07 '17 at 12:10

How to open anchor in a modal window, not a new tab

2 Answers2