Hey friends, today in this blog you'll learn how to create a Popup Share Modal UI Design using HTML CSS & JavaScript. In the previous blog, I have shared how to create a Poll UI Design in HTML CSS & JavaScript and now it's time to create Share Modal. If you're looking for some other type of modals then click here to view them all.
In this project [Popup Share Modal UI Design], at first, on the webpage, there is a view modal button, when you click on that button then the modal box appears with a popup animation. In this share modal box, there are some social media icons with pretty cool hover animation and an input box to copy the link. There is also a close icon to the right top corner to hide this modal box. To show or hide the Modal Box and copy the given link, I used JavaScript.
As I already told you, I used HTML & CSS to create the layout/design of this modal and JavaScript to show or hide the modal and to copy the given link. If you're a beginner and you don't know about JavaScript then you may have little difficulty understanding the JavaScript codes of this modal box.
But I have tried to explain the JavaScript codes by written comments. So please watch the video two or more times and then try to make it by yourself instead of depending on the source codes or files. In case you won't make this modal or somehow you'll get errors then don't worry I have given source codes and files for free. Just scroll down and recheck your codes with the given codes or download the code files.
----------------------------------------------------------------------------------------------------------------------------------------
Source Codes.
To create this program [Share Modal]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this Popup Share Modal from the given download button.
----------------------------------------------------------------------------------------------------------------------------------------
HTML CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Share Modal | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<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="view-modal">View Modal</button>
<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="#"><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="JD-KALSARIYA.BLOGSPOT.COM">
<button>Copy</button>
</div>
</div>
</div>
<script>
const viewBtn = document.querySelector(".view-modal"),
popup = document.querySelector(".popup"),
close = popup.querySelector(".close"),
field = popup.querySelector(".field"),
input = field.querySelector("input"),
copy = field.querySelector("button");
viewBtn.onclick = ()=>{
popup.classList.toggle("show");
}
close.onclick = ()=>{
viewBtn.click();
}
copy.onclick = ()=>{
input.select(); //select input value
if(document.execCommand("copy")){ //if the selected text copy
field.classList.add("active");
copy.innerText = "Copied";
setTimeout(()=>{
window.getSelection().removeAllRanges(); //remove selection from document
field.classList.remove("active");
copy.innerText = "Copy";
}, 3000);
}
}
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------
CSS CODE.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
/* background: #f2f3fb; */
background: #FF7777;
}
::selection{
color: #fff;
background: #FF7777;
}
.view-modal, .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;
}
.view-modal{
top: 50%;
color: #000;
font-size: 18px;
padding: 10px 25px;
background:#AA4455;
transform: translate(-50%, -50%);
}
.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;
}
.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;
}
.popup :is(header, .icons, .field){
display: flex;
align-items: center;
justify-content: space-between;
}
.popup header{
padding-bottom: 15px;
border-bottom: 1px solid #ebedf9;
}
header span{
font-size: 21px;
font-weight: 600;
}
header .close, .icons a{
display: flex;
align-items: center;
border-radius: 50%;
justify-content: center;
transition: all 0.3s ease-in-out;
}
header .close{
color: #000;
font-size: 17px;
background: #66GGDD;
height: 33px;
width: 33px;
cursor: pointer;
}
header .close:hover{
background: #ebedf9;
}
.popup .content{
margin: 20px 0;
}
.popup .icons{
margin: 15px 0 20px 0;
}
.content p{
font-size: 16px;
}
.content .icons a{
height: 50px;
width: 50px;
font-size: 20px;
text-decoration: none;
border: 1px solid transparent;
}
.icons a i{
transition: transform 0.3s ease-in-out;
}
.icons a:nth-child(1){
color: #1877F2;
border-color: #b7d4fb;
}
.icons a:nth-child(1):hover{
background: #1877F2;
}
.icons a:nth-child(2){
color: #46C1F6;
border-color: #b6e7fc;
}
.icons a:nth-child(2):hover{
background: #46C1F6;
}
.icons a:nth-child(3){
color: #e1306c;
border-color: #f5bccf;
}
.icons a:nth-child(3):hover{
background: #e1306c;
}
.icons a:nth-child(4){
color: #25D366;
border-color: #bef4d2;
}
.icons a:nth-child(4):hover{
background: #25D366;
}
.icons a:nth-child(5){
color: #0088cc;
border-color: #b3e6ff;
}
.icons a:nth-child(5):hover{
background: #0088cc;
}
.icons a:hover{
color: #fff;
border-color: transparent;
}
.icons a:hover i{
transform: scale(1.2);
}
.content .field{
margin: 12px 0 -5px 0;
height: 45px;
border-radius: 4px;
padding: 0 5px;
border: 1px solid #e1e1e1;
}
.field.active{
border-color: #7d2ae8;
}
.field i{
width: 50px;
font-size: 18px;
text-align: center;
}
.field.active i{
color: #7d2ae8;
}
.field input{
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 15px;
}
.field button{
color: #fff;
padding: 5px 18px;
background: #7d2ae8;
}
.field button:hover{
background: #8d39fa;
}
----------------------------------------------------------------------------------------------------------------------------------------
OUT-PUT.
----------------------------------------------------------------------------------------------------------------------------------------
0 Comments