Pure CSS pop-up box without JavaScript popup alert box

Hello; my team and the readers of this blog, As you know I am Jawad Ahmed, and i am back with an interesting topic create a Pure CSS pop-up box with pure CSS so let's start the article.

So, Being a web-developer and designer our duty is not just code the website and make a design we have to make it SEO friendly responsive and a fast loading website. We Normally Create popups or alerts with JavaScript But it slow down the loading speed of the website. So the Best way is to make our website code in HTML and CSS as we can. We all knows that CSS is not a programing language so we will limited but we can try as we can write our code in HTML and CSS.

We can not only create a popup message with CSS we can also popup a search bar in a website or a navigation menu. And It it is also depends on your mind that what you will do with this type of CSS popup box or CSS modal box. We will just create a popup box alert in pure CSS without using any JavaScript code as a result we can also boostboost the loading speed of website .

Why we should use Pure CSS pop-up box:

As I have mentioned in above paragraph JavaScript is also programming language and it take a long time to load or compile as compare to CSS. As you know if we do some mistake in CSS the whole CSS will load but the error part will not load but in JavaScript if you do some mistake so the whole script tag will not load because it is a programming language and it do compilation before loads which reduced our websites loading speed. But we can easily solve this problem by using CSS popup box instead of JavaScript. In above paragraph and title I also told you about pure CSS mean we will not use any JavaScript line. So We will do the job pure CSS. Because the article name is Create a popup box in pure CSS No JavaScript.

HTML and CSS for popup box

Here I have added the code for pure CSS pop-up box because it is free!. You can also copy this code and it is free to use without any credits to anyone. I also added a demo for CSS pop-up box because we don't scam anyone you can see the demo before using it because we know the value of your time we will not consume your much time. visit the codepen link for pure CSS pop-up box.

The code is also given below for using. So just copy it.

<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
	<a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
	<div class="popup">
		<h2>Here i am</h2>
		<a class="close" href="#">&times;</a>
		<div class="content">
			Thank to pop me out of that button, but now i'm done so you can close this window.
		</div>
	</div>
</div>

<style>body {
  font-family: Arial, sans-serif;
  background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}h1 {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  color: #06D85F;
  margin: 80px 0;
}

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}
.box {  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}
.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}</style>

Demo

Changes in this pure CSS pop-up box.

Change text of page:

At start of code you can find a "<h1>" tag here you can change the title above the pop-up button.
Just bellow the "<h1>" tag you can fin an "<a>" which is used as a button for CSS pop-up box. You can change the text which will display in button.

Change text of pop-up box:

In "pop-up" class name you can easily find the "<h2>" tag and here you can change the title of pop-up box.
Bellow the title you can find some text inside the "Content" class name. From here you can not only change the text of pop-up box, you can add a HTML design in this pop-up box. As your requirements.

Change background image of the pop-up page:

In "<style>" you can find style for "body" inside the style for body you can find the "background" property of CSS in this line of CSS you will see the the URL inside "()" brackets. Just replaced it with your image URL. I will suggest you to use a solid or grideint colour instead of any image. Now Your can replace the colour with image, just delete the "URL(https://example. Jpg)" to your hex or Rgb colour. You can use colour picker tool for colour codes.

Change title Color of pop-up page.

Just below the "body" style you can find styling for "h1" tag here you can find "color" property of CSS inside the "h1" style you can change the color using HTML color picker. Your color code will look like this: #000000;

Changes in pop-up block:

Below the title you will find the pop-up block. Contains popup button you can change background of this block by just copying the background line as we have done in body tag above.
Here another property of CSS is used to show border of box. You can change "border-radius: 20px;" here 20 is variable value you can change it as you wants.
In border property of CSS you will find "border: 20x solid #333;" as mentioned above before the pixel we have a variable value you can change it. And a color is also used for border you can also change or remove it. You can remove any property by deleting a complete line.

Changes in Button:

Inside the pop-up block you will see a button. As I have told you above you can change "border" and "background" as you wants.
Font size property of CSS is used to change the fonts size it will look like this: "font-size:1rem;" you can use "pixel" instead of "rem" but rem is a good styling in responsive designs. Before "rem" numbers are variables you can also change it!

Changes in pop-up box:

As I have showed you above you can change the style inside popup design.

like that you can easily change the title color and size of pop-up box and also the content styles.

Opinions for Pure CSS pop-up box:

Advantages of Pure CSS pop-up box :

Pure CSS.
Fast loading.
No JavaScript.
Simple Coding.
Few lines of code.
Easy to understand.
Easy to Customize as you wish.
Suitable to all designs related to pop-up.
Content adding features.

Disadvantages of Pure CSS pop-up box:

It opens a link at popup because we have used "<a>" in button when we want to go back to older page it goes back to pop-up the box.

Should I Use It?

As i have told you above here is an "<a>" is used for button you can try "<span>" tag to resolved the disadvantage of this project.

Tags:

Pure CSS pop-up box.

Pure CSS modal box.

Popup window with CSS no JavaScript.

Pure CSS pop-up window.

ULTIMATE TECHNOLOGY CENTER