Creating Pop Up Window With CSS

Maybe bring up a Pop Up or Overlay window that can only be done by javascript. But with the rapidly increasing power of CSS, we can create simple Pop Up windows. How to? Check it out.

First and foremost, of course, make the html markup first. Without the html file, how can it be made.

Pop Up Window

This is a simple Pop Up window without javascript
This window is popped up by CSS
To close this window, click the close button on the top right

After that save it with the file name index.html or whatever. Then double click the html file.
And… Jeng.. jeng.. jeng..!!! Nothing happened. Yes, yes, we haven’t given the style yet πŸ™‚


After that create a style.css file and save it in the index.html file folder earlier. Then Type the following script.

margins: 0;
padding: 0;

body, html {
font-family: Calibri, “times new roman”, sans-serif;
The style above is only for resetting the margins and padding, as well as setting the type of font used. Try refreshing your browser, surely the only thing that changes are the margins, padding, and the font type, right. That’s what we did.


Then, so that the first hyperlink looks like a real button, add the following script.

Then how to hide it. The key is in the visibility: visible that we give the #popup div. Now we change the visibility of the #popup div to hidden. If you don’t know which one to replace, change the #popup script to something like this.

popups {

width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
After your browser is refreshed, the Pop Up window must have disappeared.


Try clicking the button, nothing will happen, right? Yes, because we haven’t added the last style as well as a key style. Add the following script.

popup:target {

visibility: visible;
Save, then refresh your browser. Then click the button. And.. the mission is complete. We have successfully displayed the Pop Up window. To close it, click the close button in the upper right corner (so remember the election).

So, the complete style is as follows.

Since the mission is over, I want to go first. Whoa!? How come you just walk away without giving an explanation!? OK, I’ll explain.
First, we’ve made the pop up window disappear by changing visibility: visible to visibility: hidden. But that’s not enough! To bring it up we have to press the button. Because the target of our hyperlink button is #popup, so to bring it up, we need a pseudo-element (what’s a pseudo-class called!? Because the #popup div knows it will be the target of our hyperlink button. We added the :target pseudo-class to the #popup div and added the visibility: visible style, so that the #popup div reacts when the button is clicked and it becomes the target. Well, that reaction will change visibility: hidden to visibility: visible.
Then to hide the Pop Up window again, we have to click the close button. Well, the close button is the target # alias doesn’t exist. So that when the close button is clicked, it will return to its original state.

Confused huh!? Same, I just type confused. Hehe πŸ˜›

In conclusion : Simple Pop Up Window can be created with CSS even without javascript. This signifies the increasingly great ability of CSS to manipulate anything.