Javascript output in overlay
Ed van Papenrecht
26/10/2013 20:35:53Goedeavond allemaal,
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.
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.
PHP hulp
07/10/2024 15:27:02Eddy E
26/10/2013 21:17:52Twee lagen maken (gewoon van te voren, maar verbergen met display: none;).
De onderste is de overlay.
De bovenste is wat je wel blijft zien.
Positioneer ze allebei, dan kan je met z-index werken.
Zoiets:
En dan als CSS:
De onderste is de overlay.
De bovenste is wat je wel blijft zien.
Positioneer ze allebei, dan kan je met z-index werken.
Zoiets:
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