DEV Community 👩‍💻👨‍💻

Cover image for A Simple Guide to create Popup Like AdSense Ad Style
Stackfindover
Stackfindover

Posted on

A Simple Guide to create Popup Like AdSense Ad Style

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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");
});
Enter fullscreen mode Exit fullscreen mode

#Final Result

Best Collection of Popup designs

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈