Javascript output in overlay
Ik heb een vraag, ben momenteel bezig een website te maken die gebruik maakt van de Google Maps V3 API. Deze api wordt gebruikt om een ritprijs te berekenen van een tazi. Dit werkt uitstekend.
Wanneer ik alles heb ingevult en klik op de button bereken, dan laat ik met Document.getElement een div zien met daarin de kosten.
Echter wil ik deze div laten zien in een overlay. Dus wanneer men klikt op de button "bereken" dan verschijnt er een overlay, met daarin de output.
Kan iemand mij de goede richting op sturen hoe ik dit moet aanpakken?
bedankt alvast.
De onderste is de overlay.
De bovenste is wat je wel blijft zien.
Positioneer ze allebei, dan kan je met z-index werken.
Zoiets:
Code (php)
1
2
3
4
2
3
4
<body>
<div id="overlay"></div>
<div id="popup">...</div>
<!-- veel meer html -->
<div id="overlay"></div>
<div id="popup">...</div>
<!-- veel meer html -->
En dan als 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
27
28
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
#overlay
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.7); /* zwart, transparant */
opacity: 0.7; /* of via opacity */
display: none; /* wordt met Javascript op 'block' gezet */
}
#popup
{
position: absolute;
top: 25%;
left: 25%;
right: 25%;
bottom: 25%;
z-index: 2;
background-color: #fff;
display: none; /* wordt met Javascript op 'block' gezet */
}
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.7); /* zwart, transparant */
opacity: 0.7; /* of via opacity */
display: none; /* wordt met Javascript op 'block' gezet */
}
#popup
{
position: absolute;
top: 25%;
left: 25%;
right: 25%;
bottom: 25%;
z-index: 2;
background-color: #fff;
display: none; /* wordt met Javascript op 'block' gezet */
}
Gewijzigd op 26/10/2013 21:18:34 door Eddy E