How To Create Overlay PopUp Window Box Using CSS Without jQuery

{tocify} $title={Table of Contents}

Maybe bring up a window pop up or overlay can only be done by javascript only. But with the rapid greatness CSS, we can create a simple Pop Up window. How to do this? Check it out.

First and foremost it is definitely making its html markup. Without an html file, which may be made.

<div id="button"><a href="#popup">Click Me</a></div>
<div id="popup">
    <div class="window">
        <a href="#" class="close-button" title="Close">X</a>
        <h1>Overlay CSS Popup Window Box</h1>
        <p>It is a simple CSS Popup Window Box without jQuery<br/>
        This window is raised by CSS<br/>
        To close this window, click the close button in the top right</p>
    </div>
</div>

After that save the file name index.html or whatever. Then double click the html file and view the results via your web browser.

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

* {
margin: 0;
padding: 0;
}
body, html {
font-family: Calibri, "times new roman", sans-serif;
}

Style over just to reset the margin and padding, and set the font type used. Try refresh your browser, which definitely changed only margin, padding, and font type it just right. That's what we had to do.

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

#button {
margin: 5% auto;
width: 100px;
text-align: center;
}

#button a {
background-image: linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -o-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -ms-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -moz-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -webkit-linear-gradient(to bottom,#2a95c5,#21759b);
background-color: #2e9fd2;
width: 86px;
height: 30px;
vertical-align: middle;
padding: 10px;
color: #fff;
text-decoration: none;
border: 1px solid transparent;
border-radius: 5px;
}

After the save, refresh your browser. And what about the Overlay Pop Up window? Patience! Just add the following script.

#popup {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: visible;
}

.window {
width: 400px;
height: 100px;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 15% auto;
}

.close-button {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
border: 3px solid #fff;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
position: absolute;
top: -10px;
right: -10px;
}

Try refresh your browser. And .. Popup window we created successfully. See image :

Then how do I hide the popup? The key is to visibility: visible that we give the div #popup. Now we change the visibilty of div #popup that becomes hidden. If i do not know which one is replaced, replace the script #popup had become as follows.

#popup {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}

Once you refresh the browser, surely popup window was missing.

Try to click the button, would not happen right. Yes, because we have not added the last style as well as a key style. Add the following script.

#popup:target {
visibility: visible;
}

Save, and then refresh your browser. Then click the button. And .. the mission is complete. Popup window box of our successful show. To close it, click on the close button in the top right corner (so remember the election).

Thus, the full CSS style for overlay popup window box is as follows.

* {
margin: 0;
padding: 0;
}

body, html {
font-family: Calibri, "times new roman", sans-serif;
}

#button {
margin: 5% auto;
width: 100px;
text-align: center;
}

#button a {
background-image: linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -o-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -ms-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -moz-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -webkit-linear-gradient(to bottom,#2a95c5,#21759b);
background-color: #2e9fd2;
width: 86px;
height: 30px;
vertical-align: middle;
padding: 10px;
color: #fff;
text-decoration: none;
border: 1px solid transparent;
border-radius: 5px;
}

#popup {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}

.window {
width: 400px;
height: 100px;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 15% auto;
}

.close-button {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
border: 3px solid #fff;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
position: absolute;
top: -10px;
right: -10px;
}

#popup:target {
visibility: visible;
}

Overlay popup window box can be made simple with CSS even without jQuery. This indicates the great ability to manipulate any CSS. Good luck ...