?
Solved

CSS Top and Blank background

Posted on 2011-04-27
13
Medium Priority
?
324 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.
0
Comment
Question by:tonelm54
  • 8
  • 5
13 Comments
 
LVL 13

Expert Comment

by:jonahzona
ID: 35479111
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35479143
Sorry, that last example uses background image swaps, which can also be used in your scenario.
0
 

Author Comment

by:tonelm54
ID: 35479255
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:tonelm54
ID: 35479259
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35479289
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
 

Author Comment

by:tonelm54
ID: 35479372
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35479398
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
 

Author Comment

by:tonelm54
ID: 35479446
Still the same, but this is exactly what I need, if only the popup opacity would disapear
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35479469
I don't understand. I thought you wanted the popup NOT transparent. Right?
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35479496
I see what you are saying now. Working on it.
0
 
LVL 13

Accepted Solution

by:
jonahzona earned 2000 total points
ID: 35479516
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35479783
Did that last post help at all?
0
 

Author Comment

by:tonelm54
ID: 35481277
Thank you, it works excellently!!!
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question