Make a CSS inpage “popup”

To make a CSS “popup” such as those for “login”, you need two divs:

one is semitransparent and one is not,with the latter sitting on top of the former. Like so:

#semitranslayer {
		display: none;
		position: absolute;
		top: 45px;
		left: 0;
		margin: 0 0 -1500px;
		height: 1px;
		font-size: 0;
		width: 100%;
		height: 100%;
		background: #042f51;
		z-index: 10050;
		opacity: .7;
		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);

One Response to “Make a CSS inpage “popup””

  1. Joshua Tilson Says:


    I was looking for a way to do exactly what this describes. I would like to have a login option for members to be able to login and edit content, and i would like the login prompt to show up on the same page.
    Apparently i have this div inserted correctly into my page, however i am not sure how to make the non transparent one come to the top of the layers.

    Any one have any ideas?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: