Skip to main content

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.

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

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

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

    • Prakash Nakrani

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

  • Preety

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

    • Prakash Nakrani

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

  • Soheil

    that was great , thanks

    • Prakash Nakrani

      Glad you found it useful, Soheil

  • Michael

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

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

  • Paul Mountney

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

    • Prakash Nakrani

      Thanks mate! Glad you liked it that much.

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

  • Maria Jessika

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

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

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

  • that is great , thanks

  • owsm… its working.. thank u

  • 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

    • 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

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

    • Prakash Nakrani

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

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

    • Prakash Nakrani

      Thanks for your suggestion Zach!

  • 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

    • Prakash Nakrani

      Thanks Allen for such a kind words!

  • stony

    So cool!

  • Bridget Bullard

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

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

  • Oualid

    thank you very much great work
    you saved me 😉

  • Max

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

  • Chhabi Dash

    This looks great, Thank You

  • 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

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

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

  • Wow… its really nice

  • Pingback: Daily links 2015-06-15 | Marcin Kossowski()

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

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

  • sharoon

    Its the awesome one

  • damon

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

  • 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

  • Mayur Suthar

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

  • Nice work! i got good tutorial to learn

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

    • Prakash Nakrani

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

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

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

  • Fantastic!!

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

  • Guatam

    Its really Nice !

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

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

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

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

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

  • mcvoicex

    Hello Prakash,

    thanks thanks thanks! :-* 😉

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

  • bernardine

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

  • 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

  • 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

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

  • Cergos

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

    Thanks in advance, Cergos

  • 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

  • Angie

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

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

  • thanks bro looking for this type of popup since two days

  • 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

  • Georges

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

  • G

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

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

  • Peti

    Király 🙂

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

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

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

  • Ramesh

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

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

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

  • Shravan

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

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

  • 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

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

  • 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

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

  • Ravi

    Great Work.

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

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

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

  • 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

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

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

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

  • 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

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

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

  • khetesh

    Thanks
    this great code

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

  • A

    Thanks

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

  • Simon

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

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

  • nguyen anh hung

    theo doi

  • 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

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

  • 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

  • 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

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

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