In today’s web development landscape, creating a responsive and visually appealing modal for sharing content is a common requirement. In this tutorial, we’ll walk through the process of building a Popup Share Modal using HTML, CSS, and JavaScript. The provided code showcases a clean and modern design with social media icons and a copy link functionality.
HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Unique Share Modal | ViralCoder</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://unicons.iconscout.com/release/v3.0.6/css/line.css"
/>
</head>
<body>
<button class="custom-view-modal">View Modal</button>
<div class="custom-popup">
<header>
<span>Share Modal</span>
<div class="custom-close"><i class="uil uil-times"></i></div>
</header>
<div class="content">
<p>Share this link via</p>
<ul class="custom-icons">
<a href="#"><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="custom-field">
<i class="url-icon uil uil-link"></i>
<input type="text" readonly value="example.com/share-link" />
<button>Copy</button>
</div>
</div>
</div>
</body>
</html>CSS Styling:
The CSS code is responsible for styling the modal, buttons, and icons. It utilizes the Poppins and Roboto fonts, ensuring a clean and modern appearance. The use of transitions adds smooth animations to enhance the user experience.
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
body {
background: rgba(30, 30, 30);
}
::selection {
color: #fff;
background: #7d2ae8;
}
.custom-view-modal,
.custom-popup {
position: absolute;
left: 50%;
}
button {
outline: none;
cursor: pointer;
font-weight: 500;
border-radius: 4px;
border: 2px solid transparent;
transition: background 0.1s linear, border-color 0.1s linear,
color 0.1s linear;
}
.custom-view-modal {
top: 50%;
color: #7d2ae8;
font-size: 18px;
padding: 10px 25px;
background: #fff;
transform: translate(-50%, -50%);
}
.custom-popup {
background: #fff;
padding: 25px;
border-radius: 15px;
top: -150%;
max-width: 380px;
width: 100%;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
transform: translate(-50%, -50%) scale(1.2);
transition: top 0s 0.2s ease-in-out, opacity 0.2s 0s ease-in-out,
transform 0.2s 0s ease-in-out;
}
.custom-popup.show {
top: 50%;
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
transition: top 0s 0s ease-in-out, opacity 0.2s 0s ease-in-out,
transform 0.2s 0s ease-in-out;
}
.custom-popup :is(header, .custom-icons, .custom-field) {
display: flex;
align-items: center;
justify-content: space-between;
}
.custom-popup header {
padding-bottom: 15px;
border-bottom: 1px solid #ebedf9;
}
header span {
font-size: 21px;
font-weight: 600;
}
header .custom-close,
.custom-icons a {
display: flex;
align-items: center;
border-radius: 50%;
justify-content: center;
transition: all 0.3s ease-in-out;
}
header .custom-close {
color: #878787;
font-size: 17px;
background: #f2f3fb;
height: 33px;
width: 33px;
cursor: pointer;
}
header .custom-close:hover {
background: #ebedf9;
}
.custom-popup .content {
margin: 20px 0;
}
.custom-popup .custom-icons {
margin: 15px 0 20px 0;
}
.content p {
font-size: 16px;
}
.content .custom-icons a {
height: 50px;
width: 50px;
font-size: 20px;
text-decoration: none;
border: 1px solid transparent;
}
.custom-icons a i {
transition: transform 0.3s ease-in-out;
}
.custom-icons a:nth-child(1) {
color: #1877f2;
border-color: #b7d4fb;
}
.custom-icons a:nth-child(1):hover {
background: #1877f2;
}
.custom-icons a:nth-child(2) {
color: #46c1f6;
border-color: #b6e7fc;
}
.custom-icons a:nth-child(2):hover {
background: #46c1f6;
}
.custom-icons a:nth-child(3) {
color: #e1306c;
border-color: #f5bccf;
}
.custom-icons a:nth-child(3):hover {
background: #e1306c;
}
.custom-icons a:nth-child(4) {
color: #25d366;
border-color: #bef4d2;
}
.custom-icons a:nth-child(4):hover {
background: #25d366;
}
.custom-icons a:nth-child(5) {
color: #0088cc;
border-color: #b3e6ff;
}
.custom-icons a:nth-child(5):hover {
background: #0088cc;
}
.custom-icons a:hover {
color: #fff;
border-color: transparent;
}
.custom-icons a:hover i {
transform: scale(1.2);
}
.content .custom-field {
margin: 12px 0 -5px 0;
height: 45px;
border-radius: 4px;
padding: 0 5px;
border: 1px solid #e1e1e1;
}
.custom-field.active {
border-color: #7d2ae8;
}
.custom-field i {
width: 50px;
font-size: 18px;
text-align: center;
}
.custom-field.active i {
color: #7d2ae8;
}
.custom-field input {
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 15px;
}
.custom-field button {
color: #fff;
padding: 5px 18px;
background: #7d2ae8;
}
.custom-field button:hover {
background: #8d39fa;
}JavaScript Interaction:
The JavaScript code handles the modal’s interactivity. It toggles the modal’s visibility when the “View Modal” button is clicked. Additionally, it enables copying the link to the clipboard when the “Copy” button is clicked.
const customViewBtn = document.querySelector(".custom-view-modal"),
customPopup = document.querySelector(".custom-popup"),
customClose = customPopup.querySelector(".custom-close"),
customField = customPopup.querySelector(".custom-field"),
customInput = customField.querySelector("input"),
customCopy = customField.querySelector("button");
customViewBtn.onclick = () => {
customPopup.classList.toggle("show");
};
customClose.onclick = () => {
customViewBtn.click();
};
customCopy.onclick = () => {
customInput.select(); //select input value
if (document.execCommand("copy")) {
//if the selected text copy
customField.classList.add("active");
customCopy.innerText = "Copied";
setTimeout(() => {
window.getSelection().removeAllRanges(); //remove selection from document
customField.classList.remove("active");
customCopy.innerText = "Copy";
}, 3000);
}
};Explanation:
- HTML Structure: The HTML structure defines the overall layout of the modal. It includes a trigger button and a modal container with sections for sharing options and copying the link.
- CSS Styling: The CSS code focuses on styling the modal, buttons, and icons. It ensures a responsive and visually appealing design with smooth transitions.
- JavaScript Interaction: The JavaScript code adds interactivity to the modal. It toggles the modal’s visibility and enables copying the link to the clipboard with a user-friendly “Copied” feedback.
Conclusion:
Creating a Popup Share Modal involves combining HTML for structure, CSS for styling, and JavaScript for interactivity. The provided code serves as a foundation for developers looking to implement a similar feature on their websites. Feel free to customize the styles and add more features based on your project’s requirements.
By following this tutorial, you’ve learned how to create a stylish and functional Popup Share Modal that enhances the user experience on your website.
Happy coding!
