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.

Here are a couple versions of what your after using pure CSS. (CSS lightbox) (pop up menu in current version but can be anything)

And codedrops has a nice CSS lightbox too (nicer than mine damnit lol).

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.

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+). :rolleyes:
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