How to fade background and show a dialog box

Question

ypdev 0 Light Poster

13 Years Ago

Hi,
I would like to pass data to dialog box where the page in background is faded out.
A good example is when I click 'LOG IN' on DANIWEB, I get a dialog box with username and password fields and the rest of the screen is in gray.

Can someone help with the direction?

Many Thanks.
Perry

javascript

4 Contributors
13 Replies
859 Views
5 Days Discussion Span
Latest Post 13 Years Ago Latest Post by ypdev

All 13 Replies

cloud09 0 Junior Poster in Training

13 Years Ago

To do this, create a div with a black background, 100% width/height, and tranparency, and your login box.
The HTML:

<img src="login.png" width="100px" height="30px" alt="login" id="loginBtn"/>
<div id="login_fader">&nbsp;</div>
<div id="login_box>
    <form action="page.php">
        <input type="text" name="username" value="Username"/>
        <input type="password" name="password" />
        <input type="submit" value="Login" name="submit"/>
    </form>
</div>

The CSS:

#login_fader {
    background: black;
    opacity: .5;
    -moz-opacity: .5;
    -filter: alpha(opacity=50);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    display: none;
}
#login_box {
    width: 320px;
    height: 200px;
    border: 1px white solid:
    background: #5a5a5a;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -160px;
    z-index: 10;
    display: none;
}

The javascript:

loginBtn = document.getElementById('loginBtn');
fader = document.getElementById('login_fader');
login_box = document.getElementById('login_box');
loginBtn.onclick=function(){
   fader.style.display = "block";
   login_box.style.display = "block";}

This is an extremely basic example and would require the page to reload. If you don't want the entire page to reload, the frame would have to be submitted through an iframe.
EDIT: The position should be fixed, as if the page scrolls, the login will scroll too!

Edited 13 Years Ago by cloud09 because: n/a

morteza_ipo 0 Junior Poster in Training

13 Years Ago

Ok

Check this code!

This is like Daniweb login!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<style type="text/css">
body,table,div,input
{
font:11px tahoma;
}
.back
{
bottom:0;
position:fixed;
width:100%;
height:100%;
background-color:#333333;
opacity:0.8;
filter:alpha(opacity=80);
z-index:1000;
}
.table
{
background-color:white;
margin-top:25%;
margin-left:40%;
}
</style>
</head>
<body topmargin="0" leftmargin="0">
<div class="back">
<table class="table">
<tr><td>Username:</td><td><input type="text" /></td></tr>
<tr><td>Password:</td><td><input type="password" /></td></tr>
</table>
</div>
<br>Text Text Text Text Text Text Text Text Text Text Text
</body>
</html>

Edited 13 Years Ago by morteza_ipo because: n/a

fxm 23 Posting Pro

13 Years Ago

The small problem is a typo: <div id="login_box> should read <div id="login_box"> The big problem is that IE treats id= fields like reserved words; they can't be used as variable names. Something like this

var logBtn = document.getElementById('loginBtn');
var logfader = document.getElementById('login_fader');
var logbox = document.getElementById('login_box');
logBtn.onclick=function(){
   logfader.style.display = "block";
   logbox.style.display = "block";}

will resolve those issues - but even with those changes the display in IE still sucks (so I may have missed something).

fxm 23 Posting Pro

13 Years Ago

Sure enough, -filter: alpha(opacity=50); should be filter: alpha(opacity=50); And in IE some elements are still misplaced or hidden, so there must be more to find.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ypdev 0 Light Poster · Answer 1 · 2010-05-24T23:13:01+00:00

First, thanks for your prompt reply..
I created a new page to test Cloud09 code but for some reason I got the following error when I try to test the page:

'loginBtn' is null or not an object

Any idea?

fxm 23 Posting Pro · Answer 2 · 2010-05-25T00:29:17+00:00

I also had to remove margin: -100px 0 0 -160px; In IE the input elements are still far too low on the page but at least now they're not almost entirely out of sight off the left margin.

ypdev 0 Light Poster · Answer 3 · 2010-05-25T00:49:47+00:00

Still receive the same error: 'logBtn' is null or not an object

cloud09 0 Junior Poster in Training · Answer 4 · 2010-05-25T06:31:45+00:00

Sorry, I tested this code in chrome with out the js, and wrote it in about a minute. The code wasn't meant to implemented, just to serve as base with all the core components. I almost never just copy and paste code given in replies, I usually go through each line and figure out what its doing so I can implement parts of it into other areas. Anything I actually write for one of my sites would be extremely polished with all the bells and whistles, with the most complete functionality possible in all major browsers.

As for the negative margins, there were some : instead of ; at the end of the css statements that I fixed probably after you copied the code. They are meant to completely center the div, as it is impossible to do so with just percents.

I've also never had any issues with variables that have the same names as ids in IE, and usually most of my element variables have the same name as the element's id, as it would be too confusing and time consuming to have an alternate variable name for each element (usually at least 50 scripted elements to a site). I've never heard that it reserves ids before. Is that specific to IE6?

Can you post all the code so we can see? make sure the id, in the element and the variable declaration, as well as the variable name, is correct, including capitalization.

fxm 23 Posting Pro · Answer 5 · 2010-05-25T19:54:09+00:00

Is that specific to IE6?

I use IE8.

Could you do me a favor?
Pick up the code from your original post (above in this thread, not what you may now have on your system), fix the typo in line 3 of the html section, and then see what you have to change in the other two sections to get the display in IE to be anywhere near reasonable.

ypdev 0 Light Poster · Answer 6 · 2010-05-25T22:14:58+00:00

Here is the test page I created, the error is " 'loginBtn' is null or not an object":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<link href="assets/style.css" rel="stylesheet" type="text/css" />
    
<script type="text/javascript">
<!--

loginBtn = document.getElementById('loginBtn');
fader = document.getElementById('login_fader');
login_box = document.getElementById('login_box');
loginBtn.onclick=function(){
   fader.style.display = "block";
   login_box.style.display = "block";}

// -->
</script>

</head>
<body>
<table>
<tr>
<td>
<img id="loginBtn" src="images/imageTest.gif" width="100px" height="30px" alt="login" />
<div id="login_fader">&nbsp;</div>
<div id="login_box">
    <form action="testFadeOut.htm">
        <input type="text" name="username" value="Username"/>
        <input type="password" name="password" />
        <input type="submit" value="Login" name="submit"/>
    </form>
</div>
</td>
</tr>
</table>
</body>
</html>

fxm 23 Posting Pro · Answer 7 · 2010-05-26T02:43:36+00:00

Hi!

The problem is that the var names are not acceptable.

The following works.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style>
#login_fader {
    background: black;
    opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    display: none;
}
#login_box {
    width: 320px;
    height: 200px;
    border: 1px white solid:
    background: #5a5a5a;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    display: none;
}
</style> 
</head>
<body>
<table>
<tr>
<td>
<img id="loginBtn" src="images/imageTest.gif" width="100px" height="30px" alt="login" />
<div id="login_fader">&nbsp;</div>
<div id="login_box">
    <form action="testFadeOut.htm">
        <input type="text" name="username" value="Username"/>
        <input type="password" name="password" />
        <input type="submit" value="Login" name="submit"/>
    </form>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
<!--
 
var loginBtn = document.getElementById('loginBtn');
fader = document.getElementById('login_fader');
var login_box = document.getElementById('login_box');
loginBtn.onclick=function(){
   fader.style.display = "block";
   login_box.style.display = "block";}
 
// -->
</script>

</body>
</html>

It turns out that making the var's non-global is enough to fix this kind of problem; it was not necessary to change them to something completely different (which is what I did the first time).

cloud09 0 Junior Poster in Training · Answer 8 · 2010-05-26T03:07:35+00:00

The ids are only reserved unless you var them. And I use IE8, so was just making sure that it wasn't something from an older version. In mine it produces and object doesn't support this property/method error. But anyway, here's some code of a more complete version. The css needs some tweaking for IE7, but other than that it works well:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script type="text/javascript">
window.onload=function() {
var login_btn = document.getElementById('loginBtn');
var fader = document.getElementById('login_fader');
var login_box = document.getElementById('login_box');
var cancel = document.getElementById('cancelBtn');
//Display login box
login_btn.onclick=function() {
   fader.style.display = "block";
   login_box.style.display = "block";}
//Hide Login Box
cancel.onclick = function() {
	fader.style.display = "none";
	login_box.style.display = "none";}}
</script>
<style type="text/css">
#login_fader {
    background: black;
    opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    display: none;
}
#login_box {
	font: 14px Verdana;
    width: 310px;
    height: 160px;
    border: 1px white solid;
    background: #5a5a5a;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -160px;
    padding: 40px 0 0 10px;
    z-index: 10;
  	display: none;
}
#login_box input{
	float: left;
	margin: 2px;
	padding: 4px;
	font-size: 14px;
	width: 280px;
	border: 1px #333 solid;
}
.btn {
	padding: 3px 3px 2px 3px;
	background: #aaa;
	border: 1px #ddd solid;
	float: left;
	margin: 2px;
	font-size: 14px;
	cursor: pointer;
}
</style>
</head>
<body>
<div id="login_fader">&nbsp;</div>
<div id="login_box">
    <form action="page.php">
        <input type="text" name="username" value="Username" class="field"/> 
        <input type="password" name="password" class="field" /> 
        <input type="submit" value="Login" name="submit" style="width:auto;border:0;"/>
        <span id="cancelBtn" class="btn">Cancel</span>
    </form> 
</div>
<span id="loginBtn" class="btn">Need to login?</span>
</body>
</html>

ypdev 0 Light Poster · Answer 9 · 2010-05-29T13:17:04+00:00

FXM \ Cloud09,

Thank you so much for your help, now it works fine when I 'var' all IDs and moved the JS code to the end.

Thanks again - you provided a solution that work!
Perry

How to fade background and show a dialog box

Recommended Answers Collapse Answers

All 13 Replies

Recommended Answers