CSS Top and Blank background

Good evening,
Ive been looking for a simple way to show a CSS div into the middle of a page, and blank out the background until a button is clicked on the CSS div.

The idea is for the user to click on a line, and then a window pops up with more details in.

Does anyone have a really simple sample code of doing this? Im looking at coding this myself, not only because I prefer to code it all  myself, and not import a ready-made library.

Thanks in advance for any help you can provide.
tonelm54Asked:
Who is Participating?
 
jonahzonaCommented:
Here is what I came up with.

Ditch the transparent CSS.

Use a semi-transparent .png for the background image of the big overlay.

Here is the markup:

<HTML>
<HEAD>
<style type="text/css">
#overlay {
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 0px;
	width:100%;
	height:100%;
	text-align:center;
	z-index: 1000;
	background: url(bg.png);
        background-repeat: repeat;

}
#overlay div {
	width:300px;
	margin: 100px auto;
	background-color: #fff;
	border:1px solid #000;
	padding:15px;
	text-align:center;
}

#popup {
        background-color: grey !important;
	opacity:1 !important;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity:1.0;
        -khtml-opacity: 1.0;
        opacity: 1.0;
}
  
</style>
<script type="text/JavaScript">
function overlay() {
	el = document.getElementById("overlay");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" 

: "visible";
	}
</script>



</HEAD>
<BODY>

<a href='#' onclick='overlay()'>Click here to show the overlay</a>


<div id="overlay" style="">
	<div id="popup">
		<p>Content you want the user to see goes here.</p>
		Click here to [<a href='#' onclick='overlay()'>close</a>]
	</div>
</div>

</BODY>
</HTML>

Open in new window


And the image. Put it in the root directory with the html file. bg file
0
 
jonahzonaCommented:
This is done with a combination of CSS and a simple JavaScript.

Here is an example of clicking on a button and having it change the background color of a div.


<html>
<head>
    <title>Javascript Change Div Background Image</title>
   
    <style type="text/css">

    #div1 {
    width:100px;
    height:30px;
    background-image:url(images/blue.gif);
    }

    p {
    font-family:Verdana;
    font-weight:bold;
    font-size:11px
    }

    </style>

    <script language="javascript" type="text/javascript">
    function changeDivImage()
    {
        var imgPath = new String();
        imgPath = document.getElementById("div1").style.backgroundImage;
       
        if(imgPath == "url(images/blue.gif)" || imgPath == "")
        {
            document.getElementById("div1").style.backgroundImage = "url(images/green.gif)";
        }
        else
        {
            document.getElementById("div1").style.backgroundImage = "url(images/blue.gif)";
        }
    }
    </script>

</head>

<body>
   
    <center>
    <p>
        This Javascript Example will change the background image of<br />
        HTML Div Tag onclick event.
    </p>
    <div id="div1">
    </div>
    <br />
    <input type="button" value="Change Background Image" onclick="changeDivImage()" />
    </center>
   
</body>
</html>

Open in new window

0
 
jonahzonaCommented:
Sorry, that last example uses background image swaps, which can also be used in your scenario.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
tonelm54Author Commented:
I kinda think your on the right lines, Ive managed to find an example which seems to do what Im looking for but I cannot get the opacity correct. Id still like the user to see the controls in the background, but not be able to use them (click or manipllute) until the user closes the window.

<HTML>
<HEAD>
<style type="text/css">
#overlay {
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 0px;
	width:100%;
	height:100%;
	text-align:center;
	z-index: 1000;
	background-color:#b0c4de;
	opacity:4;
}
#overlay div {
	width:300px;
	margin: 100px auto;
	background-color: #fff;
	border:1px solid #000;
	padding:15px;
	text-align:center;
}
</style>
<script type="text/JavaScript">
function overlay() {
	el = document.getElementById("overlay");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
	}
</script>



</HEAD>
<BODY>

<a href='#' onclick='overlay()'>Click here to show the overlay</a>


<div id="overlay" style="">
	<div>
		<p>Content you want the user to see goes here.</p>
		Click here to [<a href='#' onclick='overlay()'>close</a>]
	</div>
</div>

</BODY>
</HTML>

Open in new window

0
 
tonelm54Author Commented:
0
 
jonahzonaCommented:
Add this to your overlay CSS

        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
        filter: alpha(opacity=40);
        -moz-opacity:0.4;
        -khtml-opacity: 0.4;
        opacity: 0.4;

Open in new window

0
 
tonelm54Author Commented:
That seems to do it, but also sets the background opacity of the pop-up div, so it doesnt look very clear.

Is it possible to apply it only to the background div?
0
 
jonahzonaCommented:
Yeah, you just need to add some styling and an id to that popup div.

See below.

<HTML>
<HEAD>
<style type="text/css">
#overlay {
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 0px;
	width:100%;
	height:100%;
	text-align:center;
	z-index: 1000;
	background-color:#b0c4de;
	opacity:4;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;


}
#overlay div {
	width:300px;
	margin: 100px auto;
	background-color: #fff;
	border:1px solid #000;
	padding:15px;
	text-align:center;
}

#popup {
	opacity:10;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity:1.0;
        -khtml-opacity: 1.0;
        opacity: 1.0;
}
  
</style>
<script type="text/JavaScript">
function overlay() {
	el = document.getElementById("overlay");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" 

: "visible";
	}
</script>



</HEAD>
<BODY>

<a href='#' onclick='overlay()'>Click here to show the overlay</a>


<div id="overlay" style="">
	<div id="popup">
		<p>Content you want the user to see goes here.</p>
		Click here to [<a href='#' onclick='overlay()'>close</a>]
	</div>
</div>

</BODY>
</HTML>

Open in new window

0
 
tonelm54Author Commented:
Still the same, but this is exactly what I need, if only the popup opacity would disapear
0
 
jonahzonaCommented:
I don't understand. I thought you wanted the popup NOT transparent. Right?
0
 
jonahzonaCommented:
I see what you are saying now. Working on it.
0
 
jonahzonaCommented:
Did that last post help at all?
0
 
tonelm54Author Commented:
Thank you, it works excellently!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.