Pure CSS Popup Without a Single Line of JavaScript Code

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.

113 thoughts on “Pure CSS Popup Without a Single Line of JavaScript Code

    • Prakash Nakrani says:

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

    • neme says:

      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 says:

      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???

  1. Paul Mountney says:

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

  2. 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.

    • Prakash Nakrani says:

      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?

  3. 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..

  4. Brenda says:

    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

  5. Bikal says:

    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.

  6. Zach says:

    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.

  7. 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

  8. billy says:

    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.

  9. Max says:

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

    • Prakash Nakrani says:

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

  10. JMunce says:

    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?

    • sharoon says:

      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)”

  11. 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.

  12. Joe says:

    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

  13. Avi says:

    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.

  14. Guatam says:

    Its really Nice !

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

  15. Tri says:

    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.

  16. 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…-:)

  17. 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

  18. Ales Urbanczik says:

    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

  19. Benjamin De Mers says:

    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!

  20. Cergos says:

    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

  21. Georges says:

    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

  22. Vic says:

    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.

  23. dsngr says:

    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!

  24. 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

  25. ARB says:

    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?

  26. 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

  27. Saravana says:

    # 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.

  28. Elyssa says:

    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!

  29. 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

  30. Heidi says:

    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. 🙂

  31. 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 ?

  32. ajay mehta says:

    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

  33. 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.

  34. 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.

  35. Jeff says:

    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.

  36. 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.

  37. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *