transparante achtergrond in FF
Ik ben nu al een aantal uur aan het proberen en pielen, maar kom er niet meer uit.
Wat is het probleem. Ik wil een overlappende div over mn gehele pagina met daarop een formulier. De overlappende div moet een doorzichtige achtergrond hebben. Hiervoor heb ik een .png bestand.
De code die ik nu gebruik is als volgt:
CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.overlay-hidden
{
display: none;
}
.overlay-show
{
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 100;
background-image: url("Graph/add_bg.png");
}
/* IE6 Transparante PNG hack */
* html .overlay-show
{
background-color: #333;
background-color: transparent;
background-image: url("Graph/add_bg.png");
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Graph/add_bg.png", sizingMethod="scale");
}
{
display: none;
}
.overlay-show
{
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 100;
background-image: url("Graph/add_bg.png");
}
/* IE6 Transparante PNG hack */
* html .overlay-show
{
background-color: #333;
background-color: transparent;
background-image: url("Graph/add_bg.png");
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Graph/add_bg.png", sizingMethod="scale");
}
De overlappende div heeft als id 'overlay'. Met javascript wil ik zijn uiterlijk manipuleren:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Show()
{
document.getElementById("overlay").className = "overlay-show";
LoadPage('notitie-toevoegen.php','overlay');
alert(document.getElementById("overlay").className);
}
function hideOverlay()
{
document.getElementById('overlay').innerHTML = '';
document.getElementById('overlay').className = "overlay-hidden";
}
{
document.getElementById("overlay").className = "overlay-show";
LoadPage('notitie-toevoegen.php','overlay');
alert(document.getElementById("overlay").className);
}
function hideOverlay()
{
document.getElementById('overlay').innerHTML = '';
document.getElementById('overlay').className = "overlay-hidden";
}
LoadPage is een functie die een ajax oproep afhandeld en de pagina in de juiste div plaatst.
Mijn vraag is wat doe ik fout? In IE werkt het wel, maar FF wil niet meewerken :(
Alvast bedankt,
Martijn
wat doet ie dan
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>
<script language="javascript" type="text/javascript">
function showOverlay(functie) {
if(functie == 'aan') {
document.getElementById('overlay').style.display = 'block';
} else {
document.getElementById('overlay').style.display = 'none';
}
}
</script>
<style>
.overlay {
background-color:#000000;
Filter: Alpha(Opacity=88);
opacity: 0.88;
-moz-opacity:0.88;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:1;
color:#FFFFFF;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<input type="button" onclick="javascript: showOverlay('aan')" value="Laat overlay zien!" />
<div id="overlay" class="overlay" style="display:none;">
<center>
<br /><br /><br />
een tekstje<br /><br />
<input type="button" onclick="javascript: showOverlay('uit')" value="Ok ga maar weer weg!" />
</center>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function showOverlay(functie) {
if(functie == 'aan') {
document.getElementById('overlay').style.display = 'block';
} else {
document.getElementById('overlay').style.display = 'none';
}
}
</script>
<style>
.overlay {
background-color:#000000;
Filter: Alpha(Opacity=88);
opacity: 0.88;
-moz-opacity:0.88;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:1;
color:#FFFFFF;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<input type="button" onclick="javascript: showOverlay('aan')" value="Laat overlay zien!" />
<div id="overlay" class="overlay" style="display:none;">
<center>
<br /><br /><br />
een tekstje<br /><br />
<input type="button" onclick="javascript: showOverlay('uit')" value="Ok ga maar weer weg!" />
</center>
</div>
</body>
</html>
werkt in IE en FF hier.
doe het alleen met achtergrond kleur ipv plaatje maar dat moet ook wel werken i quess
Punt is alleen, dat alles wat in de overlay div komt te staan is ook doorschijnend! Dit wil ik niet. Ik heb een formulier op de overlay div staan en de velden zijn nu ook doorschijnend :P Dit is niet de bedoeling.
Hoe krijg ik het voor elkaar om hetgeen dat in de div staat niet doorschijnend is?
Alvast bedankt
dat werkt prima hier
css oplossing weet ik daar niet voor ben ik ook al lang mee bezig geweest
en dan bij notities, rechtsboven op t plusje, notitie toevoegen. Dan wordt de overlay aangeroepen. Het formulier is doorschijnend.. niet de bedoeling.
En oorspronkelijk wou ik het dus doen met een .png zoals je kan zien in mijn eerste post. Punt is dus dat ik dit ook niet werkend krijg :S
Thnx alvast :)
In de huidige code of met het werken met de .png? Kan je dan ook aangeven in welke css class of id ?
Thnx :)
Kan je wat specifieker zijn met hetgeen ik moet doen en wat waar moet plaatsen?
Thnx :)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.overlay-hidden
{
display: none;
}
.overlay-show
{
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 100;
background-color: transparent;
}
{
display: none;
}
.overlay-show
{
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 100;
background-color: transparent;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
.overlay-show
{
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 100;
background-image: url("Graph/add_bg.png");
background-color: transparent;
}
{
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 100;
background-image: url("Graph/add_bg.png");
background-color: transparent;
}
Dus met background-image.
Wat doe ik fout :S
Anyway thnx iedereen :)