How to create a pop up skin using HTML, CSS and JavaScript?

Learn how to create pop up skins using HTML, CSS and JavaScript.

Frequently Asked Questions:

How to create a pop up skin using HTML, CSS and JavaScript?

How to Create Cookie Acceptance Using HTML, CSS and JavaScript?

How to create an active pop up skin using HTML, CSS and JavaScript?

Yes, today we will learn how to create our much needed pop up skin. And finally I will give the source code and learn to do some customization. But customization has to be done only in the HTML part. Actually there is not much customization and CSS and HTML to write but can be different as per your requirement. You can add many things and do customization here. We will learn this by just writing some simple code. And I will now give you the source code as a gift. You can learn more by customizing the source code. I always provide the source code so that we don't waste time building them. Hope you can do good customization. If you can't do it, there is no problem. I'll give you some pointers to help you do just that. Or you use the source code directly, no problem. Here is the source code and I will explain step by step later.

🍃

Source Code:

              <body>

    <div class="popup-screen">
      <div class="popup-box">
        <i class="fas fa-times close-btn">x</i>
      <div class="popimage">
        <img src="img.jpg" alt="">
      </div>
        <h2>Popup Box</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="btn">Subscribe</a>
      </div>
    </div>
    
    
  <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
  min-height: 100vh;
}

.popup-screen{
  z-index: 999999;
  position: fixed;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  transition: 0.5s ease;
  transition-property: visibility;
}

.popup-box:hover{
background:linear-gradient(200deg,hotpink,gold,greenyellow,skyblue,blue);
}

.popup-screen.active{
  visibility: visible;
}

.popup-box{
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  max-width: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 20px;
  padding: 50px 40px;
  border-radius: 20px;
  box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
  transform: scale(0);
  transition: 0.5s ease;
  transition-property: transform;
}

.popup-screen.active .popup-box{
  transform: scale(1);
}

.popup-box h2{
  font-size: 2.1em;
  font-weight: 800;
  margin-bottom: 20px;
}

.popup-box p{
  font-size: 1em;
  margin-bottom: 30px;
}

.popup-box .btn{
  color: #fff;
  background: red;
  font-size: 1.1em;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  padding: 7px 27px;
  border-radius: 3px;
}

.popup-box .btn:hover{
background:linear-gradient(290deg,pink,gold,greenyellow,skyblue,grey);

}
.close-btn{
  position: absolute;
  font-size: 1em;
  top: 0;
  right: 0;
  margin: 15px;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.3s ease;
  transition-property: opacity;
}

.close-btn:hover{
  opacity: 1;
}

section{
  padding: 50px 100px;
}

.home{
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image{
  position: relative;
  width: 45%;
  min-height: 450px;
}

.image img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.info{
  position: relative;
  width: 52%;
}

.info h2{
  font-size: 2em;
  font-weight: 800;
}

.info p{
  font-size: 1em;
  text-align: justify;
  margin-top: 10px;
}

@media (max-width: 990px){
  section{
    padding: 50px 30px;
  }

  .home{
    display: block;
  }

  .image{
    width: 100%;
  }

  .info{
    width: 100%;
    margin-top: 15px;
  }
}
      
  </style>
    <script>
    const popupScreen = document.querySelector(".popup-screen");
    const popupBox = document.querySelector(".popup-box");
    const closeBtn = document.querySelector(".close-btn");

    window.addEventListener("load", () => {
      setTimeout(() => {
        popupScreen.classList.add("active");
      }, 1000); //Popup the screen in 02 seconds after the page is loaded.
    });

    closeBtn.addEventListener("click", () => {
      popupScreen.classList.remove("active"); //Close the popup screen on click the close button.
      //Create a cookie for a day (to expire within a day) on click the close button.
      document.cookie = "WebsiteName=testWebsite; max-age=" + 30 * 24 * 60 * 60; //1 day = 24 hours = 24*60*60
    });

    //Use the created cookie to hide or show the popup screen.
    const WebsiteCookie = document.cookie.indexOf("WebsiteName=");

    if(WebsiteCookie != -1){
      popupScreen.style.display = "none"; //Hide the popup screen if the cookie is not expired.
    }
    else{
      popupScreen.style.display = "flex"; //Show the popup screen if the cookie is expired.
    }
    </script>
      
    
    </body>

1. Create the HTML part

We will put those inside the pop up skin. We need to put them inside the <div class="popup-screen"></div> tag. That is, if you want to add a photo, you need to create the HTML by following the example below.

For example: if you want to add a photo, some text, button!

Solution:

</div>

<h2>Popup Box</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<a href="#" class="btn">Subscribe</a>

</div>

Similarly you can add text, etc. Now if you want to add something outside the pop up skin : you have to add after </div> . That is, they will show in the body.

Note: Not much customization is required here, and you can add many things yourself if you need to. If there is any problem you can let me know.

2. Creating the javascript part:

Here I will talk about JavaScript customization only. Here to summarize the content only those that need to be customized so we will learn how to do the customization.

Java Script Customization 1:

setTimeout(() => {

popupScreen.classList.add("active");

}, 4000);

I have given 4 seconds here which means the pop up skin will show after 4 seconds of page load. Schedule as per your need.

Special Note: 4000 means 4 seconds, 2000 for two seconds. This is how it should be added.

Java Script Customization 2:

document.cookie = "WebsiteName=testWebsite; max-age=" + 30 * 24 * 60 * 60;

We know, one day = 24 hours = 24*60*60 seconds.

I have given 30 days here which means in 30 days it will not show again. Will show after 30 days.

Result:

Last words:

If you can complete the task correctly. Then using this source code you can easily create any pop up skin. It must be very easy for you to create special pop up skins by creating java script, css and html. Do not forget to give your opinion in the comment box.

Special Note:

There are no mistakes or errors in the source code because it has been tested and you are seeing the result above. Still, if there is any problem, you can let me know.

My Talk:

Thank you for reading this blog. Assalamu Alaikum! I am Sheikh Zubayer. I want to say something. In fact I have written this article or content or blog by taking a lot of pains, thinking, gaining knowledge about every topic and spending a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. However, if there is any problem, let me know in the comment box. I will try to answer your question properly. Hope it will be useful. I didn't write anything like hope in vain I believe it.

🍃

My Talk:

Thank you for reading this blog.
Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!

Popular Posts

How to create a pop up skin using HTML, CSS and JavaScript?

How to create a pop up skin using HTML, CSS and JavaScript?

How to create a pop up skin using HTML, CSS and JavaScript?

How to Create Cookie Acceptance Using HTML, CSS and JavaScript?

How to create an active pop up skin using HTML, CSS and JavaScript?

1. Create the HTML part

2. Creating the javascript part:

My Talk:

Posted by Priyo Event

Post a Comment

0 Comments

Ads

Featured Posts

Labels

Categories

Tags

Footer Menu Widget

Contact form

Popular Posts

How to create a pop up skin using HTML, CSS and JavaScript?

How to create a pop up skin using HTML, CSS and JavaScript?

How to create a pop up skin using HTML, CSS and JavaScript?

How to Create Cookie Acceptance Using HTML, CSS and JavaScript?

How to create an active pop up skin using HTML, CSS and JavaScript?

1. Create the HTML part

2. Creating the javascript part:

My Talk:

Posted by Priyo Event

You may like these posts

Post a Comment

0 Comments

Social Plugin

Ads

Featured Posts

Labels

Categories

Tags

Footer Menu Widget

Contact form