Page Fade Out To Focus On Popup
-
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
-
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
A couple of things that come to mind. Are you declaring the div tag at the start of the page html? (i.e before the content it has to obscure) Are you remembering to make the div's position absolute, and it's z-index a higher number than the content to be obscured? Here's my css and body
#overlay
{
background: #000;
opacity: 0.5;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
cursor: pointer;
cursor: hand;
display: none;
}#box
{
background: yellow;
position: absolute;
width: 33%;
height: 33%;
left: 1px;
top: 1px;
z-index: 101;
cursor: crosshair;
display: none;
}<body>
<div id="overlay">Overlay</div>
<div id="box" onclick="onBoxClick();" onmouseover="styleElem(this, 'red');" onmouseout="styleElem(this, 'yellow');">Box</div>
<div>
<h1>This is some content</h1><br>
<input type=button id="myBtn" onclick="onBtnClick();" value="Show"/>
</div>
</body>If this doesn't help, I can post the full source (~300 lines)
-
A couple of things that come to mind. Are you declaring the div tag at the start of the page html? (i.e before the content it has to obscure) Are you remembering to make the div's position absolute, and it's z-index a higher number than the content to be obscured? Here's my css and body
#overlay
{
background: #000;
opacity: 0.5;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
cursor: pointer;
cursor: hand;
display: none;
}#box
{
background: yellow;
position: absolute;
width: 33%;
height: 33%;
left: 1px;
top: 1px;
z-index: 101;
cursor: crosshair;
display: none;
}<body>
<div id="overlay">Overlay</div>
<div id="box" onclick="onBoxClick();" onmouseover="styleElem(this, 'red');" onmouseout="styleElem(this, 'yellow');">Box</div>
<div>
<h1>This is some content</h1><br>
<input type=button id="myBtn" onclick="onBtnClick();" value="Show"/>
</div>
</body>If this doesn't help, I can post the full source (~300 lines)
Ah perfect! Thank you so much. This works perfectly :) Thank you!
-
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
I set up a demo with a similar effect. You can use copy the code and use it... http://plecco.net/labs/modal/
Plecco Technologies, Inc. Web Design | Software Development | Internet Marketing
modified on Wednesday, January 27, 2010 9:52 AM
