asked on

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.

jonahzona

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

jonahzona

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

tonelm54

ASKER

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

tonelm54

ASKER

The example above is from http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/ BTW....

jonahzona

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

tonelm54

ASKER

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?

jonahzona

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

tonelm54

ASKER

Still the same, but this is exactly what I need, if only the popup opacity would disapear

jonahzona

I don't understand. I thought you wanted the popup NOT transparent. Right?

jonahzona

I see what you are saying now. Working on it.

ASKER CERTIFIED SOLUTION

jonahzona

membership

This solution is only available to members.