Page Fade Out To Focus On Popup

[AbydosGater]

Hi, The best way I can explain this is to just show you.

 

If you go to this site, http://www.extjs.com/examples/explorer.html#messagebox , (I know its an Ajax framework) and click on any of the buttons (Confirm, Prompt).

 

When you click the button, a dialog box pops up, But the rest of the page fades out and cant be interacted with. This is to bring the users focus onto the dialog box.

 

Now, I know to get the fade effect I have to:

1) add a div to the body tag

2) set its background to black

3) set its opacity to 0.1

4) set its z-index to something like 1000

 

What I dont understand is how to make it so that the user cannot interact with the other controls on the page.

As long as the dialog is showing, the user cannot interact with the rest of the page hidden behind it.

 

But if I add this to my own HTML page. Just a div with width/height 100% and background/opacity black/0.1.. The user can still click buttons or edit textboxes on the page?

 

Does anyone know how is this achieved?

 

Thanks,

Andyyy

[haku]

I've done this a few times. Basically I create a div with 100% height and width, position fixed, z-index 1 (or whatever number gets me above everything else that has a z-index. But I rarely find the need to apply z-indexes to anything, so 1 usually does it).

[AbydosGater]

Yeah I have got this far,

 

For example I have added such a div to this page: http://reconnetworks.net/RN_Design/index.html

It doesnt look the best, not sure why. But either way it works. The divs opacity is 0.1 and it overs the whole page.

 

The only issue is that users can still click the menu links and interact with the page in the background,

Do you know how I can change this?

 

Thanks,

Andyyy

[AbydosGater]

Yeah I had this, Only issue was I was using xHTML markup,

<div class="overlay" />

 

Without declaring the DOCTYPE. Firefox was assuming I wanted the div to wrap my content wrapper which was throwing everything off.

 

Got it working now

[haku]

You can't self-close div tags like that. Div tags require a closing tag. So by having that somewhere with no closing tag, it was invalid code, and the browser had to guess what you were trying to do, and assumed that everything after that tag was supposed to be inside it.

 

Off the top of my head, the only tags you can self close are:

link

img

 

Actually those are the only two that come to mind. There may be others as well, but I'm having a bit of a brain lapse right now.

[FaT3oYCG]

input tags in forms maybe, there arent many anyway and i find that it is easier to simply close all tags with the relevant closing tag as it gets you into good practise, i validate using html 4.0 so i dont know if it would validate correctly in xhtml but im guessing it should do.

 

With reference to w3schools

 

<area />

<base />

<basefont />

<br />

<hr />

<input />

<img />

<link />

<meta />

[haku]

input tags in forms maybe, there arent many anyway and i find that it is easier to simply close all tags with the relevant closing tag as it gets you into good practise, i validate using html 4.0 so i dont know if it would validate correctly in xhtml but im guessing it should do.

 

It doesn't. Closing tags that are supposed to be self closed invalidates XHTML.