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

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 trasition, click here and here.

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

Therefore, all of 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 in your blog or website. Just choose what you like

Manual Popup (Modal)

Manual popup is appear when visitor clicking a button. This popup generally used for filling survey, subscription form, etc. In the demo, there are 2 version of popup you can use. That’s 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=”http://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=”http://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 website.

<div class=”popup-wrapper” id=”popup”>
<div class=”popup-container”><!– Popup Contents, just modify with your own –>
<form action=”http://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=”http://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 tricks, you can download the whole demo file by click 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 🙂

~Muhammad Syakirurohman~

Versi bahasa indonesia

25 Comments

  1. when i past the html code . it’s give me this error

    (Error parsing XML, line 605, column 12: Open quote is expected for attribute “{1}” associated with an element type “class”)

  2. if you can to create video tutorial How to post in blogger .that’s better .

    thanks

  3. Awesome tutorial dude.

  4. Great tutorial I needed this.

    How can I add a cookie without using JavaScript. The popup continues on every-page.

  5. Is there a way to make this only popup once?? I need to add a cookie to this.

  6. Is there a way to add multiple pop ups on the same page?

  7. Loving this popup. works perfectly, but is there a way to retain it after post back.
    Want to do a bit more in it before I close it?

    Thanks

  8. The best bro..
    makasih banyak… #eh thankyou so much.

  9. cant able to access showing error “page not found”
    and taking url append with /#popup..what to do

  10. Love this script… just what I was looking for and it works! However, my site has a lot of parallax stuff, and when I put the popup in there, it shows up and stays put, BUT it shows UNDER all of the imagery and text when you scroll… Any way to have the pop up show ON TOP of everything else on the page?? Thanks in advance!

  11. Obrigado.

  12. Thank you for your script.!!!
    Just a question, I need to delay the auto pop-up in 3/4 seconds.
    Is it possibile?
    Thanks again

  13. ini yang kucari 😀

  14. thanks dude, its really good popup for me….:D

  15. Thank you!!!!!! I’ve been searching for this because I have a site that can’t accept JavaScript. This is exactly what I need.