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 */
popup.classList.toggle("show");
}
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="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io" 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">
<header>
<span>Share Modal</span>
<div class="close"><i class="uil uil-times"></i></div>
</header>
<div class="content">
<p>Share this link via</p>
<ul class="icons">
<a href="https://www.facebook.com/sharer/sharer.php?u=<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>
</ul>
<p>Or copy link</p>
<div class="field">
<i class="url-icon uil uil-link"></i>
<input type="text" readonly value="https://codepen.io/coding_dev_">
<button>Copy</button>
</div>
</div>
</div>
<div class="backdrop"></div>
Then add a script to catch the clicks.
document.querySelector('.backdrop').addEventListener("click", function (e) {
popup.classList.remove("show");
});
Then css to show it properly.
.popup.show{
z-index:999;
}
.popup.show + .backdrop{
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background:rgba(0,0,0,0.5);
}
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.
