SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    613
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a nice Pop-Up window (not using JS)

    I am tryingt o create a pop up window for my TOS, Bad thing is I cannot edit the <header>..</header> section because it is on a 3rd party cart site. I have looked and all I can find is how to create one using javascript. Basically when someone clicks on the TOS link I want it to pop-up a window in the center of the screen where they can scroll the test, then click X to close it.

    Any pointers on where I can find how to do that? Like I said, everything I have found is using JS to make it work.
    Thanks In Advance

    David

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here are a couple versions of what your after using pure CSS.
    http://www.websitecodetutorials.com/...s-lightbox.php (CSS lightbox)
    http://www.websitecodetutorials.com/...popup-menu.php (pop up menu in current version but can be anything)

    And codedrops has a nice CSS lightbox too (nicer than mine damnit lol).
    http://tympanus.net/codrops/2011/12/26/css3-lightbox/

    When using target it's downfall is that it takes over your back button. Focus downfall is it does not work in touch screens like iPad.

  3. #3
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    Here are a couple versions of what your after using pure CSS.
    http://www.websitecodetutorials.com/...s-lightbox.php (CSS lightbox)
    http://www.websitecodetutorials.com/...popup-menu.php (pop up menu in current version but can be anything)
    And codedrops has a nice CSS lightbox too (nicer than mine damnit lol).
    http://tympanus.net/codrops/2011/12/26/css3-lightbox/
    Ehm, in the first link I read that for the 3 :focus examples is needed "(JS help for Safari/Chrome)",
    and for the 3 :target examples is needed "(JS help for IE)" (the :target is only IE9+).
    In the second link I see in the Demo's 1/4, that the close-button is a javascript onmousedown
    In the 3rd link also the :target property is used, so without javascript not cross-browser for <= IE8.

    =======
    But @laflair13: are you sure you cannot use javascript?
    For implementing javascript it's not heeded to put them in the <head> of the document, they can be put somewhere in the <body> as well.

    =======
    Then, if it's also impossible to use javascript in the (editable parts of the) <body>, maybe it can be done with a pure css or a html solution.
    I don't know if it can fit into your system/model, but out of my hobby room came two scriptless alternatives.
    Both are tested in Firefox, Chrome, Opera, Safari-Win and IE7 and IE10; I assume the IE's between will do it too.

    A pure css popup solution

    A pure html popup solution


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •