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 Replies to “Pure CSS Popup Without a Single Line of JavaScript Code”

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

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

  1. Paul Mountney

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

  2. Samiullah Khan

    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

      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.

    • Vlad

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

    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

    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

    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

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

    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

    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.

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

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

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

  10. Natalie

    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.

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

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

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

  14. Priyanka

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

  15. Bill

    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

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

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

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

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

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

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

  22. valeri

    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

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

  24. Wesley

    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

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

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

  27. Jamie

    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

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

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

  30. Jennifer

    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.

  31. game bandarq

    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.

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

  33. הובלות

    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.

  34. friv 12

    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 *