Pure CSS Popup Without a Single Line of JavaScript Code

Jan 04, 2015
pure css popup

I’m not a JavaScript fan as I am always looking for css hacks to override my JavaScript code. So today another hack brings a snippet of pop up window or modal window with pure css and doesn’t require a single JavaScript code. So here’s how.

Pre thoughts

As we are not using JavaScript we have to make sure that a pop up is consist of various divisions. A pop up box after clicking previously created button and a close button within that pop up window. Just note that we should use <a> tag for the button in terms of get back to the actual (main) window.

Okay here’s the markup for pure css popup.


<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">
			Thanks for 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(4.jpg);
  background-size: cover;
}

h1 {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  color: orange;
  margin: 100px 0;
}

.box {
  width: 20%;
  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 orange;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: orange;
}

.overlay {
  position: absolute;
  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: orange;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

Chekout the Demo on codepen.

See the Pen Pure css popup box by Prakash (@imprakash) on CodePen.

If you want to show popup when the page loads, check out this codepen demo:

See the Pen Pure CSS popup by Prakash (@imprakash) on CodePen.

About author

Prakash Nakrani

Hi, my name is Prakash Nakrani. A freelance web developer and an enthusiast writer. I loves preety much anything about Web, mostly CSS and designs.

 Comments

  1. #

    Nice work ! Is that possible to add more animations ??

    Reply
    • Prakash Nakrani
      #

      Animation depends on you but if you want to close the popup outside the box then you can add another overlay with position absolute.

  2. #

    Nice! Is this cross-browsing? :target is the key to fire the event right?

    Reply
    • Prakash Nakrani
      #

      ya but few folks got some issues on their mobile devices, i don’t know how. Well thanks reading Jorge

  3. Preety
    #

    Its great…
    and its working very well..
    and without any javascript..thanks ..
    Thank you so much to share with us..

    Reply
    • Prakash Nakrani
      #

      Thanks for your nice thoughts Preety, Glad you found it useful.

  4. Soheil
    #

    that was great , thanks

    Reply
    • Prakash Nakrani
      #

      Glad you found it useful, Soheil

  5. Michael
    #

    Nice :-) But… is there a way to supress scrolling to to top of page when opening the popup? :-/

    Reply
    • Prakash Nakrani
      #

      Hello Michael, you can change the position of top div to fixed to prevent the scrolling although i found another great article on this topic of hongkiat that could definitely solve your question. Check it out here http://www.hongkiat.com/blog/cssmodal-build-modals-with-pure-css/

    • neme
      #

      I’m having the same issue; I really like the application (I’m not using the button, just a link—clean and simple), but it’s very confusing for viewers to be taken back to the top of the page when the pop-up is in the middle of a long page, Especially if they are viewing on a phone or tablet. Changing the overlay from “absolute” to “fixed” did not help; was there a different change you were suggesting?

      The other link you gave includes JS, which I am trying to avoid.

    • DIEUDONNE
      #

      hi am a student developer and am having a challeng with a code i am having, i want to popup a box atfer filling an entry form that will display an information and i want the box to popup only after the correct information on the form field have in inputed,

      can you please help me???

  6. Paul Mountney
    #

    This looks great, especially as it works just like it’s supposed to, AND especially as i typed it in myself. WOOHOO!!!

    Reply
    • Prakash Nakrani
      #

      Thanks mate! Glad you liked it that much.

  7. #

    Really simple way to add overlays to your website, things are always considered when it’s done in CSS. Very good for starters

    But for a little enhancement JavaScript is required as far as user experience is concerned. Like hiding popup when clicking on overlay or black fog or when pressing ESCAPE key.

    Reply
  8. Maria Jessika
    #

    Thanks. It helped me a lot!
    How if I want to make multiple pop up anyway?

    Reply
    • Prakash Nakrani
      #

      Glad you find it useful, Jessika. Your welcome, and i didn’t get your question 100% but i think you could use the same markup and css for multiple pop up.

    • #

      Did you mean that om your pages there may be several links, each opening its own popup content? And these popups can be opened not simulteneously but separately, can’t they?

  9. #

    Great man!. Thank you. May Annan Swamigal blesses you with all prosperity!.HOW BEAUTIFUL THIS IS! Especially in google sites, the HTML BOX creates lot of problems in embedding pop up codes in java, j query etc.. but with the help of “embed gadget” some css functions can be embedded. Your pop up is nicely working in that embed gadget..
    THANKS..THANKS..THANKS..

    Reply
  10. #

    that is great , thanks

    Reply
  11. #

    owsm… its working.. thank u

    Reply
  12. Brenda
    #

    Does this work on apple touchscreens?

    I have a popup that I have put onto a website but when activated on apple touchscreens the popup remains in place until the page is closed. Will your code work on these devices?

    Thanks

    Reply
    • Prakash Nakrani
      #

      Hello, Brenda sorry for inconvenience, and actually i didn’t test it on apple touchscreen but may be you can try to checkout the result. Thanks!

    • #

      dgdfg

  13. Bikal
    #

    Thanks for a great concept. It help me a lot. I’d like to know if there are other codes also which are replacing the usages of java scripts.

    Reply
    • Prakash Nakrani
      #

      Of-course, Bikal you can always check out this Pure css checkbox and i will put some more stuff like this. Thanks!

  14. Zach
    #

    Nice work. The problem in mobile is this line: transition: all 5s ease-in-out. It keeps the overlay on top of everything for 5 seconds so your screen is dead for five seconds. Changing it to something like .5s or just deleting it all together makes it much more usable.

    Reply
    • Prakash Nakrani
      #

      Thanks for your suggestion Zach!

  15. #

    Greetings Prakash from Hawaii!

    Thank you for your very simple, yet elegant, article. It worked for me the first time.

    Easy to transform it to a Sign In popup form. I’ll definitely include a reference to you and this website, should you agree, in my user experience articles.

    Mahalo Nui Loa (“Thanks a bunch” in Hawaiian).. Allen

    Reply
    • Prakash Nakrani
      #

      Thanks Allen for such a kind words!

  16. stony
    #

    So cool!

    Reply
  17. Bridget Bullard
    #

    It’s really nice and it works fine. Thank you very much for sharing. I like it!

    Reply
  18. billy
    #

    This works great when you have one button. But i tried do this for multiple buttons with their own popup, and it didn’t work quite well.

    Reply
  19. Oualid
    #

    thank you very much great work
    you saved me 😉

    Reply
  20. Max
    #

    Hi! Great solution for popups! May I ask you how to open this popup automatically (without clicking)?
    Cheers!! :)

    Reply
  21. Chhabi Dash
    #

    This looks great, Thank You

    Reply
  22. #

    Hi!
    This is exactly what I been looking for! Really nice work. If I use it on my site, I will make sure to mention you and link to you!
    Thank you!
    Best regards!
    /filip

    Reply
    • Prakash Nakrani
      #

      Thanks, i appreciate your comment, and ya of course you can use this on your site. Feel free to ask me any question.

  23. JMunce
    #

    Nice code.

    Problem: when you close the popup, and then want to click “back,” it takes you back to the popup. Can this be changed? so that after you close the popup and click “back” it really goes back a page?

    Reply
    • sharoon
      #

      According to his method he use href=”#” to close the popup which is correct in some sense but if we go back from a browser the pop comes again. So here is the solution for it.

      instead of : href=”#”
      Use: onclick=”history.back(-1)”

  24. #

    Wow… its really nice

    Reply
  25. #

    Thank you very much!
    But is it possible to use multiple popus on 1 page?
    Because when I use the same html code again, and then open the popup, it will only show the content of the first one.

    Reply
    • #

      aah never mind, fixed it already, just have to change the id popup1 to popup2 and popup3 etc.

  26. sharoon
    #

    Its the awesome one

    Reply
  27. damon
    #

    You are the man!
    Thank you the great example and thank you for sharing!

    Reply
  28. Joe
    #

    Hi – this looks awesome, but I can’t seem to get the popup to work using Squarespace… it just scrolls down… can anyone help!?!

    Thanks!
    Joe

    Reply
  29. Mayur Suthar
    #

    Really nice, less code example.
    I appreciate your work.

    Reply
  30. #

    Nice work! i got good tutorial to learn

    Reply
  31. Sam
    #

    Is there a way to set cookies? I have a one page design and a nav that auto scrolls. Everytime I click a nav link the popup reloads.

    Reply
    • Prakash Nakrani
      #

      Could you send me the link of your one page design? Because i am not fully understanding your problem.

  32. #

    How would you get the popup to appear when the page loads… I tried using the HTML onLoad event but that doesn’t seem to work.

    Thanks :)

    Reply
    • Bill
      #

      yeah i have the same issue

    • Prakash Nakrani
      #

      Hello Zachry and Bill, i have updated the article with CSS only solution for popup to appear when the page loads, You can check it out, Thanks!

  33. #

    Fantastic!!

    Reply
  34. Avi
    #

    Hay Prakash,
    Awesome CSS modal.
    If i want to pop up this POPUP but not when button is pushed. What is the trigger that make the POPUP appear?
    I want to use C# ASP.NET code to make the popup apear.
    Thanks in advance.

    Reply
  35. Guatam
    #

    Its really Nice !

    One more thing, can we change the location of opened window? i want this to open near to click area.

    Reply
  36. #

    Same question as the guy above. Except, I’d like to have the popup centered on the screen.

    Reply
  37. Tri
    #

    Can we make the popup disappear by clicking on anywhere on the screen instead of clicking on the “x” button? Thank you for a very elegant script.

    Reply
  38. #

    Hi, thank you very much for this script, helped me to one of my plugins;)

    Reply
  39. #

    Hi Prakash,
    my thought also completely mach as yours……-:) I loves much anything about Web both designing as well as developing….

    Its really very Nice and useful…Thank you so much..keep share with us..

    Thank you…-:)

    Reply
  40. mcvoicex
    #

    Hello Prakash,

    thanks thanks thanks! :-* 😉

    Reply
  41. #

    Really what I was looking for! And works!
    Thank you.

    Reply
  42. bernardine
    #

    That’s really sweet. I like it. Is it possible to add ‘yes’ ‘no’ ‘cancel’ options to the popup?

    Reply
  43. #

    Thanks Prakash….It’s Very nice……..and very good looking…….

    I would like to have the popup be movable as right now is opens away from where the user is invoking the button……Can you help with this….

    Many Thanks..Bill

    Reply
  44. Ales Urbanczik
    #

    Thanks Prakash :-) – I put a youtube video in the modal window. When the window closes the sound of the video keeps playing. Is there a way to resolve that without Java ?

    Ales

    Reply
  45. Benjamin De Mers
    #

    Can I display a URL in the popup? If so how? What do I change to make that happen. New to Javascript and would appreciate the guidance.

    Thanks a ton!

    Reply
  46. Cergos
    #

    Thanks Prakash – excellent work! Is it possible to have a pop up form with a send option?

    Thanks in advance, Cergos

    Reply
  47. Cergos
    #

    Hi Prakash – do you have a ‘Fee for Service’ facility? – I’m thinking it might be quicker to have you do the coding !!
    thanks
    Cergos

    Reply
  48. Angie
    #

    This is beautiful!
    Thank you!
    I really dont like using javascript so this is super awesome!

    Reply
  49. #

    Gr8 job, but close button dosen’t work if I resize window.

    Reply
  50. #

    thanks bro looking for this type of popup since two days

    Reply
  51. Georges
    #

    Hi Prakash, you made a very nice job!
    I tried it, and i have a little pb : the pop up form does not display the X (close) symbol
    Do you have an idea why?
    Thanks

    Reply
  52. Georges
    #

    Hi Prakash i resolved my pb as do not consider my previous question
    thanks

    Reply
  53. G
    #

    THANK YOU SO MUCH!!!! You just saved me sooo much time!

    Reply
  54. Luke
    #

    Hi thank you for this.
    The pop up is not coming up when i am using it in a div tag with one image.
    Any help ??

    Reply
  55. Peti
    #

    Király :)

    Reply
  56. Vic
    #

    The idea is cool but not for my case. Cause has some drawbacks like: no chance to align box to the center of the page when resolution is different, n’ it always scrolls the page to the top.

    Reply
  57. Nick
    #

    I found a smooth solution here http://habrahabr.ru/sandbox/69352/ . But just one unpleasant thing, the page needs to be translated in English.

    Reply
  58. #

    This work great for me. I used it combined with some PHP to give some nice info messages.

    Reply
  59. Ramesh
    #

    very nice……. I got it what I want… Thanks

    Reply
  60. #

    This is great! Is there any way to put in a delay before the popup comes up? I think that a 5 second delay would be less abrupt on the user.

    Reply
  61. #

    This is great! Is there any way to put in a delay before the popup comes up? I think that a 4 second delay would be less abrupt on the user.

    Reply
  62. Shravan
    #

    I want another page to be viewed inside a div upon click

    Reply
  63. dsngr
    #

    Hi, Great CSS work!
    Have been looking for a similar solution. Have come across an issue when using multiple open popups on a page. After closing one popup and then going to close another the first one closed reappears. Is there a way once closed to stay closed until page refresh?

    Thank you in advance for any advice!

    Reply
  64. #

    Hi Ty For the script dint get it to work whit clossing x but whit some adjustment it works now i do have a quastion is there a way to get this pop up only once or to add a check box so people could check dont show again.?
    tyvm

    Reply
  65. ARB
    #

    Great solution and easy to customize! works beautifully in Chrome and Firefox; however, in Ie 11 I cannot get the “x” close button to close the popup window. Any ideas?

    Reply
  66. #

    Hey.. thank you so much for this hack.. i love it ! This is a simple way to produce this cool effect.

    Did someone know if it’s possible to do the same effect on every links in WordPress ? In fact, I would like to open the single.php of wordpress (post’s content) in a pop-up.

    Thank you

    Reply
  67. #

    nice,work
    good and clean, thank you so much. i used it in my project instead of js approch.

    Reply
  68. Ravi
    #

    Great Work.

    Does it has all browser support ? Like IE, Chrome, Firefox, opera… etc ?

    Reply
  69. Saravana
    #

    # Hello Prakash, locally it is working good. but i have a much more asp.net button control. how could i add this code to that button control. Please could u halp me.

    Thank you.

    Reply
  70. Elyssa
    #

    I love this button! It was exactly what I had been searching for. I was custom coding a Squarespace site for a client that needed a pop up when you clicked on a link that alerted viewers that they were leaving the site. The only problem I am running into is that the button works flawlessly in the squarespace editor but when I made the site live, the button went dead. Has anyone else had this problem / is there a quick way to fix this? Any insight would be super appreciated!

    Reply
  71. #

    Hi,

    What can we use instead of “#popup1” to close it?

    I have a element on my page which uses “#” and iot bring s the popup back up.

    Regards
    Jamie

    Reply
  72. Heidi
    #

    I thought that this is super cool being pure CSS and all, and initially it seemed to work quite well. Unfortunately, on mobile devices, it really only works well for the first popup. After that, it’s quite hard to click on subsequent popups, it might work again after a bunch of clicks, but by that time, you’ve frustrated/lost the user. I tried adding the related js file, but I don’t think that this tutorial sets up the corresponding structure necessary to implement modal.js file, we would have to completely restructure the popups and triggers. I hope that there are some fixes to this because I really like the ability to do more with CSS. :-)

    Reply
  73. #

    Thanks so much, I just love your code and the way you did it!

    Reply
  74. #

    Hi.

    Im having some trouble using this image popup on a mobile device.
    Image pops up, but I can`t click “x” in corner to close popup.
    Anyone know how to solve this problem ?

    Reply
  75. ajay mehta
    #

    excellent. I used it and its really really excellent.
    only 1 issue, after u close popup window, control goes back to TOP of PAGE, whereas i want the control to return back to same place where i clicked the option.
    plz see if u can advise on this

    Reply
    • Evgenij
      #

      You can just add href=”#!” (or any unexisting target instead of “!” ) into close link to prevent scrolling to top of the page.

  76. #

    Hello,

    I was wanting to know how to add a video popup using css only. I understand what you have done with text only, but not sure how to add a video with the text. I am still in school as well learning, but was wanting to know if you knew. Thank you.

    Reply
  77. #

    amazing! 😀 thanks for sharing this! now I don’t need javascript or the jquery lightbox script for this kind of popup. 😀

    Reply
  78. khetesh
    #

    Thanks
    this great code

    Reply
  79. #

    If you are bored, there are so many ways of killing some time online.

    Right after the mobile revolution, traditional black and white mobile phones made
    its way to high quality color TFT display, which
    provided exceptional resolution and the perception of mobile phone users
    were changing forever. Reach the finish before you run out of energy
    and get into the next level.

    Reply
  80. A
    #

    Thanks

    Reply
  81. Jeff
    #

    Has anyone tried this in Squarespace sites? If so,

    1. Does it work?

    2. If it worked, where did you place the HTML code?

    Thanks.

    Reply
  82. Simon
    #

    Hi Prakash
    Thank you so much for this nice piece of code. Much love for sharing!
    love!
    Simon

    Reply
  83. #

    Hi ,
    I was wondering if I can use this technique and create multiple popups on a single pages for multiple buttons. Is it possible ?

    Reply
  84. nguyen anh hung
    #

    theo doi

    Reply
  85. #

    Good іnformation. Lucky mе I discovered yoᥙr blog by accident (stumbleupon).
    I Һave sved іt foor later!

    Loⲟk into mmy web-site; ebook indir

    Reply
  86. #

    Hi Prakash,

    Nice work but it seems that the code you have put for download is different from your code. Also, your code works nicely in mobile while the code downloaded from your link doesn’t work in mobile.

    please advise.

    Reply
  87. #

    I get pleasure from, cause I found exactly what I was taking a look for.
    You have ended my 4 day long hunt! God Bless you man. Have a great day.

    Bye

    Reply
  88. #

    It’s a shame you don’t have a donate button! I’d
    most certainly donate to this outstanding blog! I suppose
    for now i’ll settle for bookmarking and adding your RSS feed to my Google account.
    I look forward to brand new updates and will share this blog with my
    Facebook group. Chat soon!
    http://cuanhomxingfa.biz/bao-gia-cua-cuon-austdoor.html

    Reply
  89. #

    Yesterday, while I was at work, my cousin stole my iphone and tested to see if it
    can survive a twenty five foot drop, just so she can be a youtube
    sensation. My iPad is now broken and she has 83 views. I know this is totally
    off topic but I had to share it with someone!

    Reply
  90. kriti
    #

    I want to get a login popup simply on a button click rather using div .Kindly suggest me an easy way to achieve this.

    Reply
  91. #

    What’s up, I desire to subscribe for this weblog to get most up-to-date updates, therefore where can i do it please assist.

    Reply
  92. #

    With havin so much content do you ever run into any issues of plagorism or copyright infringement? My site has a lot of completely unique content I’ve either created myself or outsourced but it seems a lot of it is popping it up all over the internet without my authorization. Do you know any methods to help stop content from being ripped off? I’d certainly appreciate it.

    Reply
  93. #

    It’s actually a great and helpful piece of info.
    I’m satisfied that you just shared this helpful information with us.
    Please keep us informed like this. Thank you for sharing.

    Reply
  94. #

    I quite like reading an article that will make people think.
    Also, thanks for allowing for me to comment!

    Reply
  95. Dan
    #

    Works beautifully, thanks Prakash.

    Reply
  96. #

    I see your blog needs some fresh articles. Writing manually is time consuming, but
    there is solution for this. Just search for – Masquro’s strategies

    Reply
  97. #

    I have to thank you for the efforts you’ve put in penning this blog.

    I’m hoping to check out the same high-grade content from you in the
    future as well. In fact, your creative writing abilities has inspired me to get my own site now 😉

    Reply
  98. poornima
    #

    can we add popup without css ???

    Reply
  99. Celui-là y a 3 ans, nous levant venu s’asseoir aux USA alors c’fermentant
    Inetrdean de laquelle s’rencontrait tarabiscoté du déménagement.

    Reply
  100. #

    Awesome website you have here but I was wanting to
    know if you knew of any forums that cover the same topics talked
    about here? I’d really love to be a part of online community
    where I can get responses from other experienced
    people that share the same interest. If you have any suggestions,
    please let me know. Kudos!
    Cool Cab Services
    Shop No. 3, Shastri Nagar,

    Bhaji Wadi ,Near Hotel Sahara Star Near Neeta Travels,

    Vile Parle ,Mumbai, Maharashtra 400099.

    + 91 9920944431, + 91 9323220658, + 91 9323185033

    http://coolcabservices.in

    Reply
  101. Shantosh
    #

    @Prakash Nakrani:- I apply with another overly with ‘position absolute’ but it is not working. Please can you provide me the code.

    Reply
  102. I’ve been exploring for a bit for any high-quality articles or
    blog posts on this kind of area . Exploring in Yahoo I ultimately stumbled upon this website.
    Reading this info So i’m glad to express that I have an incredibly excellent uncanny feeling I came upon just what I needed.

    I such a lot no doubt will make certain to do not forget this site and give it a glance regularly.

    Reply
  103. It’s difficult to find knowledgeable people in this particular subject, but you sound like you know what you’re talking about!
    Thanks

    Reply
  104. I’ve been exploring for a bit for any high-quality articles or blog posts on this
    sort of house . Exploring in Yahoo I eventually stumbled upon this web site.
    Reading this info So i am satisfied to show that I’ve an incredibly just
    right uncanny feeling I discovered just what I needed.
    I most indisputably will make sure to don?t omit this website and give it
    a look on a relentless basis.

    Reply

 Write a Comment

You can use basic HTML Markup.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>