transparante achtergrond in FF

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Martijn

Martijn

19/12/2007 12:22:00
Quote Anchor link
Hey,

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)
PHP script in nieuw venster Selecteer het PHP script
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
.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");
    
}


De overlappende div heeft als id 'overlay'. Met javascript wil ik zijn uiterlijk manipuleren:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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";
}


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
 
PHP hulp

PHP hulp

11/11/2024 14:26:27
 
Sjoerd Bod

Sjoerd Bod

19/12/2007 14:19:00
Quote Anchor link
background-repeat:repeat; erbij zetten bij die .overlay-show

wat doet ie dan
 
Martijn

Martijn

19/12/2007 15:58:00
Quote Anchor link
Nog steeds niks. Snap dr echt niks meer van :S
 
Sjoerd Bod

Sjoerd Bod

19/12/2007 16:35:00
Quote Anchor link
ik doe het zelf altijd zo:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


werkt in IE en FF hier.
doe het alleen met achtergrond kleur ipv plaatje maar dat moet ook wel werken i quess
 
Martijn

Martijn

19/12/2007 17:21:00
Quote Anchor link
Dit is inderdaad bijna wat ik wil :)
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
 
PHP Newbie

PHP Newbie

19/12/2007 17:26:00
Quote Anchor link
Heb je geen online voorbeeldje? Dat maakt de boel een stuk duidelijker.
 
Sjoerd Bod

Sjoerd Bod

19/12/2007 17:30:00
Quote Anchor link
plaatje gebruiken ipv achtergrond kleur met doorzichtigheid.

dat werkt prima hier


css oplossing weet ik daar niet voor ben ik ook al lang mee bezig geweest
 
Martijn

Martijn

19/12/2007 17:41:00
Quote Anchor link
url: http://www.demaffia.nl/tmp/start/index.php

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

- -

19/12/2007 17:47:00
Quote Anchor link
background-color: transparent;
 
Martijn

Martijn

19/12/2007 18:08:00
Quote Anchor link
waar moet ik dat plaatsen? background-color: transparent; ?

In de huidige code of met het werken met de .png? Kan je dan ook aangeven in welke css class of id ?

Thnx :)
 
- -

- -

19/12/2007 18:15:00
Quote Anchor link
Dat is in plaats van je plaatje.
 
Wouter K

Wouter K

19/12/2007 18:16:00
Quote Anchor link
in je css ?
 
Martijn

Martijn

19/12/2007 18:17:00
Quote Anchor link
Ik snap je niet echt. Dus ik moet de code van het plaatje weghalen? En de code gebruiken van Sjoerd Bod? Zo ja, zijn manier werkt opzich wel, maar probleem is dus dat mijn form elementen en de rest ook transparant zijn en dat wil ik niet.

Kan je wat specifieker zijn met hetgeen ik moet doen en wat waar moet plaatsen?

Thnx :)
 
- -

- -

19/12/2007 18:19:00
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}
Dat is je CSS vanaf nu.
 
Martijn

Martijn

19/12/2007 18:25:00
Quote Anchor link
Nee, dat werkt ook niet. Ik zie wel mijn formulier, maar niet de achergrond. Heb het ook zo geprobeerd:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


Dus met background-image.

Wat doe ik fout :S
 
Martijn

Martijn

20/12/2007 22:48:00
Quote Anchor link
Weet eindelijk wat ik fout doe. Ik riep de locatie van het achtergrondplaatje verkeerd aan!

Anyway thnx iedereen :)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.