How to create a pop up box on your web page? You may think of using javascript. However, the trend is to create such popup windows without using javascript as javascript window is notorious and abused by ads. Many browsers have prevented javascript window from popping up by default. Here is a good article on creating pure CSS pop up window. If you have not mastered CSS to a certain degree, you may think it unbelievable that such effects can be done without a single line of javascript code. We will list the source code of the pure CSS popup window here and explain it in details until you can read the code comfortably.
<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="#">×</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>
body {
font-family: Arial, sans-serif;
background: url(http://myprogrammingnotes.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;
}
.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%;
}
}
You can see the html code is very simple: a button and a popup box. Click the button, the box is popped up, and click the “x” on the right corner of the box, the popup box disappears. The majority of the work is done in css.
We will review some important CSS properties before digging into the CSS code.
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
The element has 0 top margin and 0 bottom margin; the left margin and right margin are determined automatically(the browser will center the element). This is equivalent to margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;
background: rgba(255,255,255,0.2);
Define a background color:white with 0.2 opacity. The background color affects the background image defined in CSS for body(the parent element) but does not affect the child element (the button)
The opacity property defines the transparency of an element: 0-fully transparent;1-fully opaque. The opacity property not only affects the current element but also affects the children elements. Note that, if you set opacity to 0, you will see the covered elements but you can not interact with them such as clicking on them. To expose the covered elements for interaction, you should set the property “visibility” to “hidden”. Note also that the opacity defined in “background: rgba(255,255,255,0.2);” takes precedence over this opacity property.
The transition property defines how soon another property changes its value(but does not define when that property changes its value). In this case, it defines that if the opacity changes, it will complete the change within 500ms.
The position property is one of the most important CSS properties. It has several possible values: static, relative,fixed, absolute,and sticky. If an element does not define a position property, the property has the default value of static. Static position means the element is positioned in the normal flow:from top to bottom and from left to right. A relative position pulls the element from its normal position, and may leave some space originally occupied by the element. A fixed position pulls the element out of normal flow and positions it relative to the view port. It does not leave a gap because it is not in the normal flow. The absolute position positions the element relative to its nearest positioned ancestor(the positioned ancestor must have a position property with value other than static). It is also out of the normal flow. The top, right,bottom, and left properties take effect only after the position property is defined and the value is NOT static. For static position, the top, right,bottom, and left properties are ignored. The top, right,bottom, and left properties are somewhat like the margin property but they are different. They are used to help the positioning of an element while the margin property is used to control the size of an element regardless of its positioning.
The visibility property defines whether an element is visible. Compared to the “display:none” property, an element with “visibility:hidden” occupies space but displays nothing in that space, while “display:none” does not occupy space(of course does not show content either) at all.
text-align: center;
The text-align property seems to be used to align the text within the element, but actually it is used to align all the children elements of the element, not limited to text. Without text-align property, child elements will be placed from the left border of the parent element to the right(there is an offset as specified by the padding property).
The :target selector can be used to style the current active target element. The target element is specified as the “#id” in the href of a link, and active when user clicks on the link.
The introduction of other properties such as padding can be found in here and here.
After you are familiar with these CSS properties, we can dig into the html and CSS code to see how on earth the pure CSS popup box is implemented.
When user clicks on the “Let me Pop up” button, the target(“#popup1”) becomes active. The target is an overlay which has a fixed position. From the values (all 0s) of top,right,bottom, left property of the overlay, we can tell that the overlay occupies the whole view port. The overlay is originally invisible(visibility: hidden;) but now activated to be visible(visibility: visible), and its opacity changes from 0 to 1 in 500ms(see the transition property). But we can still see through the overlay to see the background because the overlay has a background property which is black and has a 0.7 opacity. The background becomes dark and the pop up window which has a white(#fff) background stands out so its simulates a modal window. The pop up box has a position property of value “relative“, but since it has not the top/right/bottom/left property, the position property is useless for itself. The position of the popup window is determined by its margin property. The position property is used by it child element(the close x). Note that the close x has an absolute position property. From the discussion before, we know that the absolute position will position the close x relative to its nearest positioned ancestor(the pop up element) with the help of the right and top property. This simulates a shutdown button on a standard window. The close x has a target(“#”) in its href so when user clicks on it, the active target becomes the “#” and the originally active target (the overlay) now becomes inactive. The overlay, which is now not an active target, is invisible so all its children including the pop up box disappear from the screen.
Comments are closed, but trackbacks and pingbacks are open.