Pop-up bij druk op knop
Ik heb nou een pop-up op mijn pagina staan:
Klik
Deze werkt prima, nu is alleen het probleem dat hij hem al opent als de pagina laadt. Dit is niet zo gek want voor dit doeleinde is die ook gemaakt. Nu zou ik hem zelf zo willen veranderen dat pas als je op een knop dukt de pop-up te voorschijn komt. Één probleem, ik kan dit niet. Hebben jullie misschien een oplossing?
De code:
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>drop down div with cookie disablement</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<style type="text/css">
/*<![CDATA[*/
body {
background-color:#000000;
color:#000;
}
#container {
width:400px;
height:200px;
background-color: #666666;
border:1px solid #FFFFFF;
position:absolute;
top:50%; /*height value plus 20px;*/
left:50%;
margin-left:-200px;
margin-top:-100px; /*half the width value*/
font-family:verdana,sans-serif;
font-size:11px;
color:#FFFFFF;
}
#container p {
text-align:justify;
margin:10px;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var i=-330; // this is the same as the "#container" top value
var speedDown=100000; // this is the div drop down speed in milliseconds
var speedOut=1000000000000000000000000000000000000; // this is the div display time in milliseconds
function setCookie() {
var now = new Date();
now.setTime(now.getTime() + 30*24*60*60*1000); //this is set for thirty days
var expString = "; expires=" + now.toGMTString();
document.cookie = 'Div_='+which+expString;
}
function dropDiv() {
if (!/Div_=(\d)/.test(document.cookie)) {
document.getElementById("container").style.top=i+"px";
if(i<50) {
i+=8;
dropper=setTimeout("dropDiv()",speedDown);
}
else {
clearTimeout(dropper);
setInterval('removeDiv()',speedOut);
}
}
}
function removeDiv() {
document.getElementById("container").style.display="none";
which=1;
setCookie();
}
onload=dropDiv;
//]]>
</script>
</head>
<body>
<div id="container">
<p>
Login
</p>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>drop down div with cookie disablement</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<style type="text/css">
/*<![CDATA[*/
body {
background-color:#000000;
color:#000;
}
#container {
width:400px;
height:200px;
background-color: #666666;
border:1px solid #FFFFFF;
position:absolute;
top:50%; /*height value plus 20px;*/
left:50%;
margin-left:-200px;
margin-top:-100px; /*half the width value*/
font-family:verdana,sans-serif;
font-size:11px;
color:#FFFFFF;
}
#container p {
text-align:justify;
margin:10px;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var i=-330; // this is the same as the "#container" top value
var speedDown=100000; // this is the div drop down speed in milliseconds
var speedOut=1000000000000000000000000000000000000; // this is the div display time in milliseconds
function setCookie() {
var now = new Date();
now.setTime(now.getTime() + 30*24*60*60*1000); //this is set for thirty days
var expString = "; expires=" + now.toGMTString();
document.cookie = 'Div_='+which+expString;
}
function dropDiv() {
if (!/Div_=(\d)/.test(document.cookie)) {
document.getElementById("container").style.top=i+"px";
if(i<50) {
i+=8;
dropper=setTimeout("dropDiv()",speedDown);
}
else {
clearTimeout(dropper);
setInterval('removeDiv()',speedOut);
}
}
}
function removeDiv() {
document.getElementById("container").style.display="none";
which=1;
setCookie();
}
onload=dropDiv;
//]]>
</script>
</head>
<body>
<div id="container">
<p>
Login
</p>
</div>
</body>
</html>
Alvast bedankt!
Verder komt de code hier, niet overeen met je voorbeeld, die mist gewoon dingen als body en html.
Dat is de pop-up, ik ben nu aan het proberen met de code dus vandaar dat de code er nu waarschijnlijk enigsinds anders uitziet.
@iChris
D
Dat is de bedoeling.
Maar hebben jullie enig ideE?
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>drop down div with cookie disablement</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<style type="text/css">
/*<![CDATA[*/
body {
background-color:#000000;
color:#000;
}
#container {
width:400px;
height:200px;
background-color: #666666;
border:1px solid #FFFFFF;
position:absolute;
top:-230px; /*height value plus 20px;*/
left:50%;
margin-left:-200px; /*half the width value*/
font-family:verdana,sans-serif;
font-size:11px;
color:#FFFFFF;
}
#container p {
text-align:justify;
margin:10px;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var i=-330; // this is the same as the "#container" top value
var speedDown=50; // this is the div drop down speed in milliseconds
var speedOut=10000; // this is the div display time in milliseconds
function setCookie() {
var now = new Date();
now.setTime(now.getTime() + 30*24*60*60*1000); //this is set for thirty days
var expString = "; expires=" + now.toGMTString();
document.cookie = 'Div_='+which+expString;
}
function dropDiv() {
if (!/Div_=(\d)/.test(document.cookie)) {
document.getElementById("container").style.top=i+"px";
if(i<50) {
i+=8;
dropper=setTimeout("dropDiv()",speedDown);
}
else {
clearTimeout(dropper);
setInterval('removeDiv()',speedOut);
}
}
}
function removeDiv() {
document.getElementById("container").style.display="none";
which=1;
setCookie();
}
onload=dropDiv;
//]]>
</script>
</head>
<body>
<div id="container">
<p>
Login<P>
<input type="button" value="Sluit venster" onclick="removeDiv();" />
</p>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>drop down div with cookie disablement</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<style type="text/css">
/*<![CDATA[*/
body {
background-color:#000000;
color:#000;
}
#container {
width:400px;
height:200px;
background-color: #666666;
border:1px solid #FFFFFF;
position:absolute;
top:-230px; /*height value plus 20px;*/
left:50%;
margin-left:-200px; /*half the width value*/
font-family:verdana,sans-serif;
font-size:11px;
color:#FFFFFF;
}
#container p {
text-align:justify;
margin:10px;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var i=-330; // this is the same as the "#container" top value
var speedDown=50; // this is the div drop down speed in milliseconds
var speedOut=10000; // this is the div display time in milliseconds
function setCookie() {
var now = new Date();
now.setTime(now.getTime() + 30*24*60*60*1000); //this is set for thirty days
var expString = "; expires=" + now.toGMTString();
document.cookie = 'Div_='+which+expString;
}
function dropDiv() {
if (!/Div_=(\d)/.test(document.cookie)) {
document.getElementById("container").style.top=i+"px";
if(i<50) {
i+=8;
dropper=setTimeout("dropDiv()",speedDown);
}
else {
clearTimeout(dropper);
setInterval('removeDiv()',speedOut);
}
}
}
function removeDiv() {
document.getElementById("container").style.display="none";
which=1;
setCookie();
}
onload=dropDiv;
//]]>
</script>
</head>
<body>
<div id="container">
<p>
Login<P>
<input type="button" value="Sluit venster" onclick="removeDiv();" />
</p>
</div>
</body>
</html>
Die code werkt hoor. Gewoon zoals je voorbeeld. Ik denk dat het niet werkte omdat je bijvoorbeeld bij top 50% had staan. Die moet wel in de min staan zodat de div niet zichtbaar is...
Code (php)
1
onload=dropDiv;
verwijderen. En de JS function dropDiv toekennen aan een button via de onclick actie.
Code (php)
1
onload=dropDiv;
Dat weghalen. En een knop maken met
Code (php)
1
onclick="dropDiv();"
Thomas schreef op 20.06.2008 21:49:
Snap je?
Ah, jah, maar volgens mij zou het toch niet met die code van jou gekunt hebben, die was al aardig vernacheld.