The following example shows a Modal component with icons leading to social media platforms:
Selecting an icon leads users to the selected website, where users can post a pre-filled message containing the URL of the current document.
Each icon is a Custom component.
The component is available for download in the Attachments tab (share_social_media_modal_export.zip archive).
The HTML content for LinkedIn is:
<a href="https://www.linkedin.com/sharing/share-offsite/?url=" target="_blank" class="network">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png"></img>
</a>
The HTML content for Facebook is:
<a href="https://twitter.com/intent/tweet?url=" target="_blank" class="network">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/X_logo_2023.svg"></img>
</a>
The HTML content for Twitter is:
<a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="network">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/2023_Facebook_icon.svg"></img>
</a>
The CSS code for each of the three elements is:
img {
width: 100%;
height: 100%;
max-width: 33vh;
}
The JavaScript code for each of the three elements is:
// Select the <a> element
let link = document.querySelector('.network');
// Get the value of the @href attribute of the <a> element
let currentHref = link.getAttribute('href');
// Get the readerUrl value of the map
let url_map = map.readerUrl;
// Get the domain name
let currentURL = window.location.origin;
// Append the elements to the @href attribute
let newHref = currentHref + currentURL + url_map;
// Set the modified @href value back to the <a> element
link.setAttribute('href', newHref);