How To Make a Modal Box With CSS and JavaScript for Social Share?
Modal Box with HTML, CSS and JavaScript is a technic to open a box with some information as an overlay of other content.
In this tutorial, we will create a modal for social sharing buttons.
Let’s Start Coding, Open your code editor and create Two files for HTML, CSS, and JavaScript.
Write the basic structure of HTML like given below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Box With CSS and JavaScript</title>
</head>
<body>
</body>
</html>How to connect CSS files with HTML?
Connect your CSS file with HTML by using <link href=”stylesheet” href=”yourstyle.css” />
How to connect JavaScript with HTML?
Connect your js file with HTML by using <script src="app.js" ></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Box With CSS and JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
</body>
</html>Here is the HTML code, copy and paste it inside the body tag but before <script> Tag.
HTML Code:
<button class="share_btn">
Share
<i class="ion-android-share-alt"></i>
</button>
<div class="modal_wraper" data-action="modal_close">
<div class="modal_container">
<div class="header">
Share Now
<button class="close" data-action="modal_close">
<i class="ion-android-close"></i>
</button>
</div>
<div class="body">
<div class="social_media">
<a href="#" class="facebook">
<i class="ion-social-facebook"></i>
</a>
<a href="#" class="twitter">
<i class="ion-social-twitter"></i>
</a>
<a href="#" class="linkedin">
<i class="ion-social-linkedin"></i>
</a>
<a href="#" class="pinterest">
<i class="ion-social-pinterest"></i>
</a>
<a href="#" class="instagram">
<i class="ion-social-instagram"></i>
</a>
</div>
<div class="copy_wraper">
<strong>Share by copy</strong>
<div class="copy_url_wraper">
<input type="url" id="shareable_url"
value="https://www.youtube.com/channel/UCiEVvaV8O6VBKzU3d7ezKGg" />
<button class="copy_url_btn">
Copy <i class="ion-ios-copy-outline"></i>
</button>
</div>
</div>
</div>
</div>
</div>Copy this CSS code and paste it into your stylesheet that is connected to your HTML file.
CSS Code:
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap");
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: "Roboto", sans-serif;
display: grid;
place-content: center;
min-height: 100vh;
}
.share_btn {
padding: 10px 25px;
border: none;
outline: none;
background-color: #2196f3;
color: #fff;
font-size: 20px;
cursor: pointer;
box-shadow: 0 2px 10px #0005;
border-radius: 5px;
}
.modal_wraper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0005;
padding: 15px;
place-items: center;
display: none;
}
.modal_wraper.active {
display: grid;
}
.modal_wraper .modal_container {
max-width: 450px;
width: 100%;
background-color: #fff;
box-shadow: 0 1px 6px #0001, 0 2px 10px #0002;
}
.modal_wraper .modal_container .header {
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: #0009;
}
.modal_wraper .modal_container .header .close {
border: none;
background-color: transparent;
outline: none;
font-size: 1.5rem;
color: inherit;
cursor: pointer;
transition: 0.3s ease-in-out;
}
.modal_wraper .modal_container .header .close > * {
pointer-events: none;
}
.modal_wraper .modal_container .header .close:hover {
color: #f44336;
}
.modal_wraper .modal_container .body {
padding: 20px 20px 50px;
}
.modal_wraper .modal_container .body .social_media {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
}
.modal_wraper .modal_container .body .social_media > a {
text-decoration: none;
padding: 5px;
width: 50px;
height: 50px;
background-color: gray;
font-size: 1.5rem;
display: grid;
place-content: center;
border-radius: 50%;
color: #fff;
box-shadow: 0 2px 10px #0003;
}
.facebook {
background-color: #3b5999 !important;
}
.twitter {
background-color: #55acee !important;
}
.linkedin {
background-color: #0077b5 !important;
}
.pinterest {
background-color: #bd081c !important;
}
.instagram {
background-color: #e4405f !important;
}
.copy_wraper {
padding-top: 30px;
}
.copy_wraper > strong {
display: inline-block;
font-size: 0.9rem;
margin-bottom: 15px;
color: #0008;
}
.copy_wraper .copy_url_wraper {
border: 1px solid #2196f3;
border-radius: 6px;
display: flex;
padding: 6px;
}
.copy_wraper .copy_url_wraper input {
width: 100%;
outline: none;
border: none;
pointer-events: none;
padding: 0 10px;
}
.copy_wraper .copy_url_wraper .copy_url_btn {
border: none;
outline: none;
padding: 10px 15px;
display: inline-flex;
gap: 5px;
border-radius: 6px;
font-size: 18px;
background-color: #2196f3;
color: #fff;
cursor: pointer;
box-shadow: 0 2px 10px #0002;
transition: 0.3s ease-in-out;
}
.copy_wraper .copy_url_wraper .copy_url_btn:hover {
box-shadow: 0 2px 15px #0005, 0 2px 6px #0002;
}Here is the js code for controlling the popup, just copy and paste it inside the js file that you connected with your HTML file.
JavaScript Code:
let share_btns = document.querySelectorAll('.share_btn'),
modal_wraper = document.querySelector('.modal_wraper');
share_btns.forEach(share_btn => {
share_btn.addEventListener('click', ()=>{
modal_wraper.classList.add('active');
});
});
addEventListener('click', (e)=>{
if(e.target.dataset.action == 'modal_close'){
modal_wraper.classList.remove('active');
}
});
let copy_url_btn = document.querySelector('.copy_url_btn');
if(copy_url_btn)
{
copy_url_btn.addEventListener('click', copyURL);
}
function copyURL(){
let copyInput = document.getElementById('shareable_url');
copyInput.select();
document.execCommand("copy");
alert("Copied: "+ copyInput.value);
}You can see the output of the above code in the codepen.
Output in Codepen:
Free online tools: https://imageoptimize.help/
Leave a Reply