Creating a Pop up/Modal window using CSS. No JavaScript.
Tuesday, 17 November 2015
Hello? you all have probably wondered how to make a pop up or modal window, well in this article I will show you how.
In most cases, people use JavaScript to make pop up windows, which isn't a bad thing but, it might be overwhelming for those without any java Script knowledge. So in this post I'll demonstrate how you can achieve the same using just CSS.
We will make use of the CSS :target selector to pull this off.
So what is this CSS :target selector?
"The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.."
Quoted from Mozilla Developer's site
As you can see from the image above, an id of "#popup" is being passed into the URI hence selecting that element with that id. To achieve this, simply crate an anchor tag with a href value of the id you want to select. This is explained further in the code below.
How to use this selector in css.
#popup:target{
/* The CSS code goes here */
}
The HTML.
<!-- pop up launcher -->
<a href="#popup" class="popup-open">Open Pop up</a>
<!-- pop up window -->
<div class="popup-bg" id="popup">
<div class="popup-content">
<a href="#" class="close-popup">X</a>
<h2>Hello I am a Pop up</h2>
<p>
Lorem ipsum dolor sit amet, vel wisi falli conceptam no, inciderint conclusionemque no cum. Democritum efficiantur te ius, nam omittantur accommodare eu. Mel ei homero liberavisse, ex sit tation ceteros. At falli elitr eirmod quo, falli ignota impedit sit cu. Te quo tota complectitur definitionem.
</p>
</div>
</div>
The HTML Explained.
<a href="#popup" class="popup-open">Open Pop up</a>
<div class="popup-bg" id="popup">
<div class="popup-content">
<a href="#" class="close-popup">X</a>
<h2>Hello I am a Pop up</h2>
<p>
Lorem ipsum dolor sit amet, vel wisi falli conceptam no, inciderint conclusionemque no cum. Democritum efficiantur te ius, nam omittantur accommodare eu. Mel ei homero liberavisse, ex sit tation ceteros. At falli elitr eirmod quo, falli ignota impedit sit cu. Te quo tota complectitur definitionem.
</p>
</div>
</div>
Next is another div within the "#popup" div. this is where the popup's content will go hence the class name "popup-content". We will also use this class to style it.
That's it for the HTML, let's check out the CSS.
The CSS.
.popup-open{
text-decoration: none;
color: #fff;
padding: 10px;
background: #93cc76;
}
.popup-bg{
background: rgba(0,0,0,0.7);
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
visibility: hidden;
z-index: 9999;
}
.popup-content{
width: 40%;
margin: 10% auto;
padding: 15px;
background: #fff;
}
.close-popup{
background:#EF2929;
color: #fff;
padding: 10px;
text-decoration: none;
float: right;
}
#popup:target{
visibility: visible;
}
The CSS Explained.
.popup-open{
text-decoration: none;
color: #fff;
padding: 10px;
background: #93cc76;
}
We start off by styling the anchor tag (that has a class of .popup-open) to make it look like a button by giving it a padding of 10px and a greenish background color(#92cc76). The tex decoration's value is none to remove the defaunlt underline. We also set it's text-color to white (#fff) so that it blends in nicely..popup-bg{
background: rgba(0,0,0,0.7);
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
visibility: hidden;
z-index: 9999;
}
Next we target the pop up window (with a class of popup-bg). We set it's background color to black with an opacity of 0.7. The reason we are using rgba() to do this is simply because we don't want the inner div to inherit the opacity on it's text. I noticed that when I use the CSS "opacity: 0.7;" property the div's within it inherit this opacity.The top, bottom, left and right values are 0. This is the same as setting the div's width and height to occupy the whole screen. The position is set to fixed so that it stays exactly within the screen and it's z-index to 9999 so that it stays on top of every other div along the z-ndex ( Think in terms of 3D graphs).
Finally we set it's visibility value to hidden so that it's not visible by default. This is very important, because we will use the ":tagrget" selector to make it visible.
.popup-content{
width: 40%;
margin: 10% auto;
padding: 15px;
background: #fff;
}
Next we style the pop content. we give it a width of 40% of the screen. we then give it a margin of 10% of the screens height on top and bottom, then set the margin values of to the right and left to auto. This will make the div centered horizontally. then we finish by giving it a padding of 15px to nicely place the content within it and a background of white..close-popup{
background:#EF2929;
color: #fff;
padding: 10px;
text-decoration: none;
float: right;
}
Next is the anchor tag with a class of "close-popup". This anchor tag closes the pop up by simply changing the URI segment from "#popup" to "#" that is it's href value.We first give it a red background (#EF2929) and text color of white (#fff). We set the padding to 10px to give it an icons look. We set the text decoration to none to remove the default anchot tag text underline. Finally we float it to the right .
#popup:target{
visibility: visible;
}
Lastly we set the popup's visibility to visible when it's targeted. When the prevoius anchor tag with a href value of "#popup" is clicked, it selects the pop up window using the ":taget" selector. So the above CSS changes the visibility from hidden to visible.I hope this post was informative to you. You can download the project here or view the demo here.
By: Unknown | On: Tuesday, 17 November 2015 | At: 10:28 |
IN:
