·  Normal is a dryer setting.

13 Comments

  • Eric Young
    at · Reply

    I enjoyed your article!

  • Jose Miguel
    at · Reply

    Great web design and article thx!

  • So Ph
    at · Reply

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

  • pageold
    at · Reply

    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
    at · Reply

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

  • shahi
    at · Reply

    Hi pageold,

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

  • Sam
    at · Reply

    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
    at · Reply

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

    • Paul
      at

      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
      at

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

  • ueff
    at · Reply

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

  • ueff
    at · Reply

    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.