popup
Cornelis.
demopopup.php
<html>
<head>
<title>testpopup.php</title>
<style type="text/css">
#popupbox
{
margin-top: -80%;
margin-left: 65%;
padding-top: 10px;
width: 10%;
height: 130px;
position: absolute;
color: white;
background: Dodgerblue;
border: solid black 2px;
border-radius: 10px;
box-shadow: 10px 10px blue;
z-index: 9;
font-family: arial;
visibility: hidden;
}
#heading
{
margin-top: -10px;
position: relative;
padding: 1px 10px 7px 10px;
height: 20px;
font-size: 20px;
background: black;
border-radius: 8px 8px 0 0;
}
</style>
<script language="JavaScript" type="text/javascript">
function popup(showhide)
{
var obj = document.getElementById('popupbox');
switch(showhide)
{
case "show" : obj.style.visibility="visible";
break;
case "hide" : obj.style.visibility="hidden";
break;
}
}
function changecolor(name, status)
{
var obj = document.getElementById(name);
switch(status)
{
case "AAN" : obj.setAttribute('style', 'stroke:black; fill:lime');
break;
case "UIT" : obj.setAttribute('style', 'stroke:black; fill:white');
break;
}
}
</script>
<body>
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
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
<?php
$width = 1024;
$height = 768;
$out = "<svg width='".$width."px' height='".$height."px' ";
$out .= "font-size='12' xlmns='http://www.w3.org/2000/svg'>\n";
$out .= "<rect x='0' y='0' width='".$width."' height='".$height."' ";
$out .= "style='stroke:black; fill:DodgerBlue;'/>\n\n";
echo($out);
$x = 100;
$y = 100;
$name = "square1";
$width = 20;
$height = 20;
$out = "<a href=\"JavaScript:void(0);\" onclick=\"popup('show');\" >\n";
$out .= "<rect id='".$name."' x='".$x."' y='".$y."' width='".$width."' ";
$out .= "height='".$height."' style='stroke:black; fill:white'/>\n";
$out .= "</a>\n";
echo($out);
$x = 200;
$y = 100;
$name = "square2";
$width = 20;
$height = 20;
$out = "<a href=\"JavaScript:void(0);\" onclick=\"popup('show');\" >\n";
$out .= "<rect id='".$name."' x='".$x."' y='".$y."' width='".$width."' ";
$out .= "height='".$height."' style='stroke:black; fill:white'/>\n";
$out .= "</a>\n";
echo($out);
?>
$width = 1024;
$height = 768;
$out = "<svg width='".$width."px' height='".$height."px' ";
$out .= "font-size='12' xlmns='http://www.w3.org/2000/svg'>\n";
$out .= "<rect x='0' y='0' width='".$width."' height='".$height."' ";
$out .= "style='stroke:black; fill:DodgerBlue;'/>\n\n";
echo($out);
$x = 100;
$y = 100;
$name = "square1";
$width = 20;
$height = 20;
$out = "<a href=\"JavaScript:void(0);\" onclick=\"popup('show');\" >\n";
$out .= "<rect id='".$name."' x='".$x."' y='".$y."' width='".$width."' ";
$out .= "height='".$height."' style='stroke:black; fill:white'/>\n";
$out .= "</a>\n";
echo($out);
$x = 200;
$y = 100;
$name = "square2";
$width = 20;
$height = 20;
$out = "<a href=\"JavaScript:void(0);\" onclick=\"popup('show');\" >\n";
$out .= "<rect id='".$name."' x='".$x."' y='".$y."' width='".$width."' ";
$out .= "height='".$height."' style='stroke:black; fill:white'/>\n";
$out .= "</a>\n";
echo($out);
?>
<div id="popupbox">
<center>
<div id="heading">POPUP</div>
<button onclick="changecolor('square1', 'AAN');popup('hide')">AAN</button><br>
<button onclick="changecolor('square1', 'UIT');popup('hide')">UIT</button><br>
</center>
</div>
</body>
</html>
var activesquare;
In het php gedeelte:
regel 15: $out = "<a href=\"JavaScript:void(0);\" onclick=\"activesquare='square1'; popup('show');\" >\n";
regel 26: $out = "<a href=\"JavaScript:void(0);\" onclick=\"activesquare='square2'; popup('show');\" >\n";
en dan tot slot onderin bij de buttons:
<button onclick="changecolor(activesquare, 'AAN');popup('hide')">AAN</button><br>
<button onclick="changecolor(activesquare, 'UIT');popup('hide')">UIT</button><br>
Gewijzigd op 31/10/2012 23:25:36 door Frank Nietbelangrijk
Inderdaad dat werkt, een globale variabele, ik wist niet dat het kon, zo eenvoudig dat ik het zelf had kunnen bedenken. Ik heb het zelfs nog iets eenvoudiger gemaakt door bij de eerste variabele die changecolor() mee krijgt weg te halen, en door in regel 15 en 16 een functie aanroep toe te voegen om de variabele activesquare te setten. Nog een klein vraagje: Hoe kan ik het woord POPUP bij <div id="heading"> vanuit de functie popup veranderen in SQUARE1 of SQUARE2.