How To Make A Popup Using HTML, CSS And JavaScript
Hello viewer, welcome to M-Softech. Today I will teach you How To Make A Popup Using HTML, CSS And JavaScript. The first thing we want to think about is what we want to do to trigger a popup. You can trigger an event on almost anything such as a button, link or keypress.
Modal popups are used pretty frequently on the web. Some popular uses of them include driving newsletter sign ups, displaying notifications/alerts, and handling register and login forms.
Our modal will be generic which means you will be free to use it for whatever purpose you’d like. Here’s what they will look like once finished:
First, we have a simple button which, when clicked on, triggers the modal to open.
What you will need:
- Text Editor such as notepad++ or Sublime Text Editor – Choose a text editor you prefer to write code in
- Basic knowledge of HTML, JavaScript, CSS
Let’s start with the HTML markup for the modal.
<!DOCTYPE html>
<html>
<head>
<title>Popup Model</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
</head>
<body>
<button class="view-modal">Open 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="example.com/share-link">
<button>Copy</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/custom.js">
</script>
</body>
</html>Let’s start with the CSS for the modal.
@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: #d7416d;}
::selection{color: #fff;background: #d7416d;}
.view-modal, .popup{position: absolute;left: 50%;}
button{
outline: none;
cursor: pointer;
font-weight: 500;
border-radius: 4px;
border: 2px solid transparent;
}
.view-modal{
top: 50%;
color: #d7416d;
font-size: 18px;
padding: 10px 25px;
background: #fff;
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: #fff;
font-size: 17px;
background: #c74d6e;
height: 33px;
width: 33px;
cursor: pointer;
}
header .close:hover{background: #c13b5f;}
.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: #d7416d;}
.field i{
width: 50px;
font-size: 18px;
text-align: center;
}
.field.active i{color: #d7416d;}
.field input{
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 15px;
}
.field button{
color: #fff;
padding: 5px 18px;
background: #d7416d;
}
.field button:hover{background: #d33362;}Let’s start with the JavaScript for the modal.
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);
}
}If you enjoyed reading this post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts.
if you have any confusion Comment below or you can contact us by filling out our contact us.
YOU MIGHT ALSO LIKE
How To Make a Responsive Flexbox Website Layout
How to Create Responsive Resume Website using HTML and CSS | Resume CV design in HTML CSS
If you have any problem to understand this code you can watch also video tutorial
