Step 1 — Creating a New Project
In this step, we need to create a new project folder and files (index.html, style.css, main.js) for creating an HTML Popup. In the next step, we will start creating the structure of the webpage.
Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.
<!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>Goolge Adsense Style Popup</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;800&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
This is the base structure of most web pages that use HTML.
Add the following code inside the <body> tag:
<div id="content">
<div class="container">
<div class="click-me"><a href="#">Click Me</a></div>
</div>
</div>
<!-- Start popup code -->
<div id="ad_position_box">
<div class="card">
<div class="top-row flex-row">
<div class="colmun">
<span>Ad</span>
</div>
<div class="colmun">
<button class="report"><svg viewBox="0 0 14 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 8C3.1 8 4 7.1 4 6C4 4.9 3.1 4 2 4C0.9 4 0 4.9 0 6C0 7.1 0.9 8 2 8ZM2 10C0.9 10 0 10.9 0 12C0 13.1 0.9 14 2 14C3.1 14 4 13.1 4 12C4 10.9 3.1 10 2 10ZM0 18C0 16.9 0.9 16 2 16C3.1 16 4 16.9 4 18C4 19.1 3.1 20 2 20C0.9 20 0 19.1 0 18Z" fill="#5F6368"></path></svg></button>
<button class="skip"><svg viewBox="0 0 48 48" fill="#5F6368"><path d="M38 12.83L35.17 10 24 21.17 12.83 10 10 12.83 21.17 24 10 35.17 12.83 38 24 26.83 35.17 38 38 35.17 26.83 24z"></path><path d="M0 0h48v48H0z" fill="none"></path></svg></button>
</div>
</div>
<div class="ad-content">
<img src="ad.jpg" alt="ad">
</div>
</div>
</div>
<script src="main.js"></script>
Step 3 — Adding Styles for the Classes
In this step, we will add styles to the section class Inside style.css file
* {
padding: 0;
margin: 0;
text-decoration: unset;
list-style: none;
font-family: 'Poppins', sans-serif;
}
html, body {
width: 100%;
height: 100%;
background: url(bg.jpg) no-repeat center / cover;
position: relative;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.click-me a {
color: #ffffff;
padding: 5px 20px;
background: rgb(255 255 255 / 20%);
border-radius: 50px;
}
/* Adsense style popup */
svg {
width: 1.2em;
height: 1.2em;
}
div#ad_position_box button {
background: transparent;
border: unset;
font-size: 20px;
cursor: pointer;
}
.flex-row {
display: flex;
align-items: center;
justify-content: space-between;
}
div#ad_position_box {
display: none;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: fixed;
top: 50%;
transform: translateY(-50%);
backdrop-filter: blur(50px);
}
div#ad_position_box.active {
display: flex;
}
div#ad_position_box .card {
background: #fff;
padding: 10px 24px 25px;
border-radius: 6px;
position: relative;
box-shadow: 0px 8px 12px rgb(60 64 67 / 15%), 0px 4px 4px rgb(60 64 67 / 30%);
}
.ad-content {
display: block;
box-shadow: 0px 10px 22px rgb(0 0 0 / 65%);
}
.ad-content img{
display: block;
width: 100%;
}
Step 4 — Add some line of jQuery code inside main js file
$(".click-me a").click(function(){
$("#ad_position_box").addClass("active");
});
$(".skip").click(function(){
$("#ad_position_box").removeClass("active");
});
#Final Result
Top comments (0)