Using a custom button to open a social share popup

I am using the following tutorial:
Popup Share Modal with Social Icons using HTML, CSS and JavaScript

Here is my example: Codepen

  1. I would like my custom button to open the popop (currently not working). I think it’s because I’m using an “a” instead of a “button”.

  2. I would expect my codepen URL to appear in the popup (to copy the address) - not the hard-coded example URL.

  3. Clicking the social icons at the moment does nothing - am I missing something?

  4. I would like the popup to close when you click anywhere else on the page, in addition to the close button.

Thank you in advance for any help.

1 Like

Then you’d need to change the constant variable ‘viewBtn’ to point to your new buttons class. e.g.

const viewBtn = document.querySelector(".btn-calendar1"),

As you are using anchors you would need preventDefault() I believe.

    viewBtn.onclick = (e)=>{
      e.preventDefault();/* added this */

You don’t have any script in place to do that. You’d need to find or write a suitable script to do that. It would grab the url from your address bar and then insert it in place of the hard coded one.

Again you don’t have any scripts in place to add the correct links although you could add them manually to the href following the format required by those services.

e.g. I think that something like this is needed for Facebook.

<a href="" target="_blank"><i class="fab fa-facebook-f"></i></a>

You’d have to go to each service and see what they require in the url etc.

You can find more information here:

You could shim a backdrop under the modal to cover the whole page and use that to collect clicks outside.

e.g. add an element immediately after the popup html (

) e.g.

<div class="popup">
      <span>Share Modal</span>
      <div class="close"><i class="uil uil-times"></i></div>
    <div class="content">
      <p>Share this link via</p>
      <ul class="icons">
        <a href="<URL>" target="_blank"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-whatsapp"></i></a>
        <a href="#"><i class="fab fa-telegram-plane"></i></a>
      <p>Or copy link</p>
      <div class="field">
        <i class="url-icon uil uil-link"></i>
        <input type="text" readonly value="">
  <div class="backdrop"></div>

Then add a script to catch the clicks.

document.querySelector('.backdrop').addEventListener("click", function (e) {

Then css to show it properly.{
} + .backdrop{

Having said all the above you may be better off looking for a complete script to do all that as I believe there is an API you can also use these days but is above my skills.

Thank you Paul. Nice to hear from an old acquaintance :wink:

I have updated my Codepen. The button now opens the popup, and the close function is working.

I’m seeing some strange behaviour. When I use “” as the href of the Facebook icon - it works. When I use my generated URL as the href, the Facebook icon does not appear (you can see the actual URL on the Codepen):


Do you have any idea why that’s happening?

Try using live view on codepen when testing or try on your own server.

(I think you may need to be a premium member for live view but can’t remember. You should be able to test my link above anyway.)

Sorry I missed that comment.

Long time no see :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.