·  Normal is a dryer setting.

13 Comments

I enjoyed your article!

Great web design and article thx!

and how am I supposed to popy/caste this like I throw all my sites together, hmm? ;-))

hi.. thank you for your tutorial. it works extremely good! anyway, do u have any idea how to make when the pop up appeared, it is just appear on that particular scrolled page, not refreshing the page.. any idea? thanks :)

Tom Messerschmidt · November 12, 2015 at 2:26 pm

Hey, really nice tutorial. This is very useful! :D

Hi pageold,

You can use animation with keyframe. so that you can control whatever you want.

Hi! Great tutorial, but my specific situation requires even more lean approach – I can use inline CSS only! So, no pseudo-elements whatsoever. Is there a way to do this or “Popup windows without JavaScript, mark II” without any pseudo-elements? Thanks!

Enrique Arróniz · December 18, 2017 at 5:26 pm

Very nice article. ¿Could you please explain me how to launch the modal without a button link?

Navigate to the target. For example, if your page is “demo.html” and your popup trigger is , then navigating to “demo.html#target” would trigger the popup.

Enrique Arróniz · December 19, 2017 at 2:02 pm

Thank you very much! I will test it and tell you how it went.

Great approach, its always good to use as less JS as possible. I’ll implement this in my latest project, one thing i would suggest is using dislpay: none->block instead of visibility: hidden->visible as i consider this better practice for hiding stuff completely :)

That may be, but you can’t transition the display property. You can transition visibility and opacity. :)

Ah ok, thanks for the explanation, makes total sense if you want to animate. Another Improvement would be setting the overlay position:fixed and assign overflow:auto, so it really fits the whole viewport instead of sometimes cut of in the middle of the page, if the Popup is longer than the page, eg on Smartphones.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top