Using layer/skin to block page

[southbeach]

Something I see more and more and I like to use is the placing of a skin/layer over a page to restrict access to it ...

This is very handy when you want user to:
1) Confirm an alert() or confirm() JS function
2) Complete and submit popup windows
3) Simply to make sure something is done before the main page is made available again
4) Get the user's attention

I am sure that there are a number of other reasons to use this, and just as many not to use them.

I am working on a project where JS is used to accept input and confirm actions. I would like to do this to keep my users from hovering mouse over the main page. Hovering the mouse has action behind it and I need a way to keep these from conflicting with the existing triggered action.

How is this done?

I suspect through the use of layer and changing its attributes. Part of the trick is to set the layer's transparency at about 60%

Regards

 

[vacunita]

Basically yes, you use a layer/DIV set to absolute position so its outside the document flow, and with a Z-index above everything else. You can then give it either a semi transparent background, or fiddle with transparency settings in CSS.

Using JS you change its display attribute from none to block, and then back to none when you want it to go away.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Targol]

To complete vacunita's answer, I'll say that this kind of mask works very well except for IE6 where select boxes don't care the Z-order and appear over the div whatever their relatives z-order.
To override this IE6 bug, you can replace the div with an Iframe (with no src provided).

Water is not bad as long as it remains outside human body ;-)

 

[Foamcow]

To get around the IE6 problem, use the same Javascript to set their visibility to hidden.
Do this either by manually setting the relative CSS attribute(s) or append a Class name that effectively hides the offending elements.

You may find the same issue with Flash content also.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[southbeach]

Thank you guys ... Good to see I was on track on my original thoughts. I truly appreciate your points and will give these a try.

 

[BillyRayPreachersSon]

Here's what we're using at the moment:

<iframe id="unavailable" src="blankFile.html"></iframe>

#unavailable {
	position: absolute;
	z-index: 500;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 1500px;
	opacity: 0.5;
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	filter: alpha(opacity=50);
}

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]