Enter your email to subscribe Devaradise. Totally free!

CSS tutorials

How to Create Popup/Modal with Pure CSS3 (Without Javascript/Jquery)

Syakir Rahman
Last updated on June 9th, 2020
25 Comments
CSS3 popup

Hello guys, in this post, I will show you about creating popup with only using CSS3 technique, without any javascript or jquery at all. So, this popup will not slow down your website speed.

The other advantage of creating popup without any JS is this popup will keep working if javascript in user browser is not activated. The disadvantage is, in the old browser this popup will not working because this is using pseudo class :target, CSS3 animation, and CSS3 transition. To see browser support of CSS3 animation and CSS3 transition, click here and here.

As we all know, a popup is used in a website in order to encourage the visitor to do something we want, like subscribing our lists, like our facebook fan page, follow our twitter, etc. Unfortunately, the use of popup is usually not-userfriendly. It means the majority of users do not like popup, especially auto popups.

Therefore, all popups in this tutorial designed as simple and friendly as possible for user, to minimize bounce rate caused by using popup. Below are popups that you can use on your blog or website. Just choose what you like

Manual Popup (Modal)

A manual popup appears when visitors clicking a button. This popup generally used for filling surveys, subscription forms, etc. In the demo, there are 2 versions of popup you can use. That’s a dark version and light version.

Popup dark skin
Popup Light Skin
<div id=”closed”></div>
<a href=”#popup” class=”popup-link”>Click to show Pop Up</a>
<div class=”popup-wrapper” id=”popup”>
<div class=”popup-container”><!– Popup Contents, just modify with your own –>
<form action=”https://www.devaradise.com/2015/01/tutorial-membuat-popup-tanpa-javascript-jquery.html#” method=”post” class=”popup-form”>
<h2>Ikuti Update !!</h2>
<p>Daripada hanya melihat demo untuk popup-nya saja, lebih baik masukkan juga email anda agar mendapatkan pemberitahuan saat ada update posting menarik lain seperti ini.<br/>
<strong>Percayalah, saya hanya akan mengirim sesuatu yang bermanfaat untuk anda :)</strong></p>
<div class=”input-group”>
<p><input type=”email” name=”email” placeholder=”Email Address”></p>
<p>
<input type=”hidden” name=”action” value=”subscribe”>
<input type=”hidden” name=”source” value=”https://www.devaradise.com/2015/01/tutorial-membuat-popup-tanpa-javascript-jquery.html”>
<input type=”hidden” name=”sub-type” value=”widget”>
<input type=”hidden” name=”redirect_fragment” value=”blog_subscription-2″>
<input type=”hidden” id=”_wpnonce” name=”_wpnonce” value=”aaf0b68fcd”>
<input type=”submit” value=”Submit” name=”jetpack_subscriptions_widget”>
</p>
</div>
</form>
<!– Popup Content is untill here–><a class=”popup-close” href=”#closed”>X</a>
</div>
</div>
– The code between <!– Popup Contents, just modify with your own –> and <!– Popup Content is untill here–> is popup content. You have to modify that with your own.
a.popup-link {
padding:17px 0;
text-align: center;
margin:7% auto;
position: relative;
width: 300px;
color: #fff;
text-decoration: none;
background-color: #FFBA00;
border-radius: 3px;
box-shadow: 0 5px 0px 0px #eea900;
display: block;
}
a.popup-link:hover {
background-color: #ff9900;
box-shadow: 0 3px 0px 0px #eea900;
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
}
/* end link popup*//*style untuk popup */
#popup {
visibility: hidden;
opacity: 0;
margin-top: -200px;
}
#popup:target {
visibility:visible;
opacity: 1;
background-color: rgba(255,255,255,0.7);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
z-index: 99999999999;
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
}@media (min-width: 768px){
.popup-container {
width:600px;
}
}
@media (max-width: 767px){
.popup-container {
width:100%;
}
}
.popup-container {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #333;
color:#fff;
border-radius: 3px;
}a.popup-close {
position: absolute;
top:3px;
right:3px;
background-color: #fff;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#333;
}/* style untuk isi popup */.popup-form {
margin:10px auto;
}
.popup-form h2 {
margin-bottom: 5px;
font-size: 37px;
text-transform: uppercase;
}
.popup-form .input-group {
margin:10px auto;
}
.popup-form .input-group input {
padding:17px;
text-align: center;
margin-bottom: 10px;
border-radius:3px;
font-size: 16px;
display: block;
width: 100%;
}
.popup-form .input-group input:focus {
outline-color:#FB8833;
}
.popup-form .input-group input[type=”email”] {
border:0px;
position: relative;
}
.popup-form .input-group input[type=”submit”] {
background-color: #FB8833;
color: #fff;
border: 0;
cursor: pointer;
}
.popup-form .input-group input[type=”submit”]:focus {
box-shadow: inset 0 3px 7px 3px #ea7722;
}
The CSS code above is for dark version popup with light overlay background. To change the popup to light skin and dark overlay background, just modify the code below.
– rgba(255,255,255,0.7) modify to rgba(0,0,0,0.7). This is css code of overlay background color.
– #fff modify to #333. This is css code of text color in popup and close icon color.
– #333 modify to #fafafa. This is css code of popup background color.
– 600px is popup width size. Just adjust it yourself.
Demo Popup 1Demo Popup 2

Auto Popup

I believe, you often see this auto popup when you visit some websites. Auto popup is popup that appear automatically when a web page accessed. Auto popup generally contain product promotion, ads, subscription form, offering, etc. Auto popup usually unwelcome the visitor, especially if that autopopup is so long and can’t be closed manually. So, just use the auto popup wisely, in order to keep user-friendly of the website.

<div class=”popup-wrapper” id=”popup”>
<div class=”popup-container”><!– Popup Contents, just modify with your own –>
<form action=”https://www.devaradise.com/2015/01/tutorial-membuat-popup-tanpa-javascript-jquery.html#” method=”post” class=”popup-form”>
<h2>Ikuti Update !!</h2>
<p>Daripada hanya melihat demo untuk popup-nya saja, lebih baik masukkan juga email anda agar mendapatkan pemberitahuan saat ada update posting menarik lain seperti ini.<br/>
<strong>Percayalah, saya hanya akan mengirim sesuatu yang bermanfaat untuk anda :)</strong></p>
<div class=”input-group”>
<p><input type=”email” name=”email” placeholder=”Email Address”></p>
<p>
<input type=”hidden” name=”action” value=”subscribe”>
<input type=”hidden” name=”source” value=”https://www.devaradise.com/2015/01/tutorial-membuat-popup-tanpa-javascript-jquery.html”>
<input type=”hidden” name=”sub-type” value=”widget”>
<input type=”hidden” name=”redirect_fragment” value=”blog_subscription-2″>
<input type=”hidden” id=”_wpnonce” name=”_wpnonce” value=”aaf0b68fcd”>
<input type=”submit” value=”Submit” name=”jetpack_subscriptions_widget”>
</p>
</div>
</form>
<!– Popup contents is until here–><a class=”popup-close” href=”#popup”>X</a>
</div>
</div>
– The code between <!– Popup Contents, just modify with your own –> and <!– Popup Content is untill here–> is popup content. You have to modify that with your own.
/* style untuk link popup */
a.popup-link {
padding:17px 0;
text-align: center;
margin:10% auto;
position: relative;
width: 300px;
color: #fff;
text-decoration: none;
background-color: #FFBA00;
border-radius: 3px;
box-shadow: 0 5px 0px 0px #eea900;
display: block;
}
a.popup-link:hover {
background-color: #ff9900;
box-shadow: 0 3px 0px 0px #eea900;
-webkit-transition:all 1s;
transition:all 1s;
}
/* end link popup*/
/* animasi popup */@-webkit-keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
@-moz-keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
@keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
/* end animasi popup */
/*style untuk popup */
#popup {
background-color: rgba(0,0,0,0.7);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
-webkit-animation:autopopup 2s;
-moz-animation:autopopup 2s;
animation:autopopup 2s;
}
#popup:target {
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
opacity: 0;
visibility: hidden;
}@media (min-width: 768px){
.popup-container {
width:600px;
}
}
@media (max-width: 767px){
.popup-container {
width:100%;
}
}
.popup-container {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #fafafa;
color:#333;
border-radius: 3px;
}a.popup-close {
position: absolute;
top:3px;
right:3px;
background-color: #333;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#fff;
}
/* end style popup *//* style untuk isi popup */
.popup-form {
margin:10px auto;
}
.popup-form h2 {
margin-bottom: 5px;
font-size: 37px;
text-transform: uppercase;
}
.popup-form .input-group {
margin:10px auto;
}
.popup-form .input-group input {
padding:17px;
text-align: center;
margin-bottom: 10px;
border-radius:3px;
font-size: 16px;
display: block;
width: 100%;
}
.popup-form .input-group input:focus {
outline-color:#FB8833;
}
.popup-form .input-group input[type=”email”] {
border:0px;
position: relative;
}
.popup-form .input-group input[type=”submit”] {
background-color: #FB8833;
color: #fff;
border: 0;
cursor: pointer;
}
.popup-form .input-group input[type=”submit”]:focus {
box-shadow: inset 0 3px 7px 3px #ea7722;
}
/* end style isi popup */
The style of this auto popup is light skin with dark overlay background. To modify that, just follow the instruction below CSS code in Manual popup.
Auto Popup Demo

In this auto popup, I use CSS3 animation for transition effects. Whereas, in manual popup, I use CSS3 transition. For you who interested to learn more about this CSS trick, you can download the whole demo file by clicking the download link below.

Download

Just modify it yourself. You can also make other creation with CSS3 animation, CSS3 transition and Pseudo class :target technique.


Implementing to Blogger & WordPress

Honestly, this post written for web designer or front-end web developer who interested in exploring more about CSS technique. But, because some of this blog visitors also blogger, so i give you how to add these to blogger blog and wordpress self hosted site.

But before, you have to determine what the content of youp popup. You can fill the popup content with facebook like box, twitter follower box, etc. Get the content codes first, then follow the steps below :

Add CSS3 Popup to Blogspot/Blogger Blog

1. Login to Dashboard > Choose Blog > Template > Edit HTML
2. Paste the CSS for popup (you can get this above) and CSS for your popup content above ]]></b:skin>
3. Paste HTML below <body>.
4. If you use manual popup, This HTML code : ‘<a href=”#popup” class=”popup-link”>Click to show popup</a>’ placed in HTML/Javascript widget. Then, modify the text according to your needs.
5. Click Save.

Add CSS3 Popup to WordPress Self hosted blog

1. Login to Dashboard > Appeareance > Editor
2. Choose file header.php (Header)
3. Paste CSS between <style> and </style>. If the <style> and </style> tag is not exist, just create them yourself below </title>.
4. Paste HTML below <body>.
5. Click save.
6. Follow the step 4 if the popup you want is appear in whole of web page. But, If you want the popup just appear in home page, skip the step 4 and follow step 7-8 below.
7. Choose file index.php (Main index template)
8. Paste HTML at the very top, or at the bottom. Then, Click save.
9. Same as in blogspot, If you use manual popup, This HTML code : ‘<a href=”#popup” class=”popup-link”>Click to show popup</a>’  placed in HTML/text widget.  Then, modify the text according to your needs.

That’s it. What do you think about this?

If you want to follow the tutorial via video instead, you can watch this youtube video created by Chris Minnik from Webucator. For your information, Webucator has CSS classes that allow you to join CSS3 training.

(The video was created when this site used the previous design)

Share if this post is useful 🙂

~Syakir Rahman~

Versi bahasa indonesia

25 thoughts on “How to Create Popup/Modal with Pure CSS3 (Without Javascript/Jquery)”

Comments are closed.

© Copyright Devaradise. All rights reserved. Theme: Devaradise 2020 by Syakir Rahman.