We help IT Professionals succeed at work.

CSS Top and Blank background

tonelm54
tonelm54 asked
on
357 Views
Last Modified: 2012-05-11
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.
Comment
Watch Question

Top Expert 2011

Commented:
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

Top Expert 2011

Commented:
Sorry, that last example uses background image swaps, which can also be used in your scenario.

Author

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

Top Expert 2011

Commented:
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

Author

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?
Top Expert 2011

Commented:
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

Author

Commented:
Still the same, but this is exactly what I need, if only the popup opacity would disapear
Top Expert 2011

Commented:
I don't understand. I thought you wanted the popup NOT transparent. Right?
Top Expert 2011

Commented:
I see what you are saying now. Working on it.
Top Expert 2011
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Top Expert 2011

Commented:
Did that last post help at all?

Author

Commented:
Thank you, it works excellently!!!
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.