PopUp-Info für den Gast

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten � PopUp-Info für den Gast

Seite 1 von 2 � Seite 1 2 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | PopUp-Info für den Gast datum

19.02.2024 09:46 (zuletzt bearbeitet: 14.04.2024 18:07)

Daishi

Informationen anzeigen

Beitr�ge:	339
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	295

Meine Idee und Inspiration: PopUp-Info für den Gast

Hallo ihr Lieben, versuche irgendwie ein modernes PopUp für das Forum zu gestalten.

Wie gesagt es war eine Idee und Inspiration, die Inspiration hatte ich von Wolfgang durch seinen Rechtsklick Script.

Hier mal ein Bild, wie es ausschaut.

Bild:

Wollte es so machen, dass es bei registrierten Usern nicht anzeigt, aber kenne nicht die genauen Codes für JavaScript vom Forum Xobor.

Ich habe noch privat einen PHP Fusion führendes Open-Source-CMS

Auf einen Linuxrechner als Home Server, von außen kein Zugriff, ist nur im Haus ein Hereinkommen. Möchte auch keine Ports freischalten, da meine Internetleitung für den Server zu schwach ist. Bräuchte ich eine andere Leitung, habe bei der Telekom schon nachgefragt, ist aber eine sehr teure Angelegenheit.

Bin nicht der Beste, ist nur eine Idee gewesen, und eine Inspiration.

Na ja, sind noch einige Fehler drinnen, die ich nicht hinbekomme.

Wollte hier mal nachfragen, wo ich hier Fehler eingebaut habe und ob das alles umgeschrieben werden muss oder neu geschrieben.

Einen Fehler hat er noch, da weiß ich nicht wie ich den z - Index 99999 eingeben soll, habe schon probiert, aber keine Wirkung gezeigt, deswegen habe ihn weggelassen.

Bild mit Fehler:

Ich hoffe, dass man die Fehler findet, die ich hier eingebaut habe.

Beim JavaScript habe ich versucht eine Speicherung einzubauen, die greift hier nicht da es keine CMS ist, bin noch php Fusion gewohnt, hatte ich früher viel mit gearbeitet, heute nicht mehr so, nur privates und als Hobby.

Ich denke, dass das Javascript auch neu geschrieben werden muss.

Hier mal das Script komplett:

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
 
<style>
.side-body {
  font-size: 10px;
  color: #C9C9C9;
  background: #454241;
  background: #454241 url(images/gradient.png) repeat-x;
  border-top: 1px solid #000;
  padding: 3px 5px 5px 5px;
  box-shadow: 0px 0px 10px 0px Dimgrey;
}
td {
  font-family: "trebuchet ms", Verdana, Tahoma, Arial, Sans-Serif;
  font-size: 11px;
}
 
.tbl2 {
  font-size: 11px;
  background: #454241;
  padding: 4px;
 
}
</style>
 
<div id="styled_popup" name="styled_popup" style="width: 600px; height: 730px; display: block; position: absolute; top: 1612px; left: 735px; opacity: 1;">
<table width="80%" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
	<td style="background: url(//files.homepagemodules.de/b916726/a_88_64479035.gif) top left;" align="center">
		<span style="color:white;"><b>Willkommen Gast&nbsp;&nbsp;&nbsp;<img src="//files.homepagemodules.de/b104774/a_icon8_8eea1ac1.gif"></b></span>
	</td>
	<td style="background: url(//files.homepagemodules.de/b916726/a_88_64479035.gif) top right;" width="30" align="right">
		<a href="javascript:fadeOutMyPopup();"><img src="//files.homepagemodules.de/b916726/a_91_41bd6ebd.png" width="15px" height="15px"></a>
	</td>
</tr>
<tr>
	<td colspan="2" class="side-body">
	<table border="0" width="100%" class="tbl2">
		<tbody><tr>
                          <td class="tbl1"><u><b><a href="./anmeldung.php" title="Kostenlos registrieren">Registriere Dich völlig kostenlos und nutze alle Features der Seite.</a></b></u><br>Als registrierter Benutzer hast Du einige Vorteile. <br>
Unten kannst Du die Unterschiede zwischen Mitgliedern und Gästen sehen.<hr>
		<table cellpadding="0" cellspacing="2" width="100%" class="tbl-border">
		<tbody><tr>
		<td class="tbl1"><b>Möglichkeiten:</b></td>
 
		<td class="tbl1"><center><b>Gast</b></center></td>
 
		<td class="tbl1"><center><b>Mitglied:</b></center></td>
 
		</tr>
		<tr>
			<td class="tbl1">Zugriff auf die gesamte Seite.</td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_89_88f2803f.png" width="15px" height="15px"></center></td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_90_53f2871d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>  
			<td class="tbl1">Profile mit Foto-Album.</td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_89_88f2803f.png" width="15px" height="15px"></center></td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_90_53f2871d.png" width="15px" height="15px"></center></td>
		</tr>
 
		<tr>
			<td class="tbl1">Lesen und schreiben im Forum.</td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_89_88f2803f.png" width="15px" height="15px"></center></td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_90_53f2871d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
			<td class="tbl1">Benutzen der Shoutbox.</td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_89_88f2803f.png" width="15px" height="15px"></center></td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_90_53f2871d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
			<td class="tbl1">ein persönliches Gästebuch</td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_89_88f2803f.png" width="15px" height="15px"></center></td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_90_53f2871d.png" width="15px" height="15px"></center></td>
		</tr>
 
		<tr>
			<td class="tbl1">Kontakt zu anderen Mitgliedern.</td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_89_88f2803f.png" width="15px" height="15px"></center></td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_90_53f2871d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
			<td class="tbl1">Schreiben von Kommentaren zu den Inhalten der Seite.</td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_89_88f2803f.png" width="15px" height="15px"></center></td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_90_53f2871d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
			<td class="tbl1">Keine Anzeige dieser nervigen Nachricht.</td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_89_88f2803f.png" width="15px" height="15px"></center></td>
			<td class="tbl1"><center><img src="//files.homepagemodules.de/b916726/a_90_53f2871d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
			<td class="tbl1" colspan="3">
			<br><font size="2"><b>Wenn Du Probleme hast bei der Registrierung<br>kontaktiere bitte den Webmaster  <a href="private_new.php?sendto=1" title="Kontakt zum Webmaster"><b><i>HIER</i></b></a></b></font></td>
		</tr>             
</tbody></table></td></tr></tbody></table>
</td>
</tr>
</tbody></table>
</div>
 
<script>
 
// Browsersichere Funktion zur Behandlung der Deckkraft
 
function setOpacity( value ) {
document.getElementById("styled_popup").style.opacity = value / 10;
document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
 
function fadeInMyPopup() {
for( var i = 0 ; i <= 100 ; i++ )
setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}
function myPopupRelocate() {
var scrolledX, scrolledY;
if( self.pageYOffset ) {
scrolledX = self.pageXOffset;
scrolledY = self.pageYOffset;
} else if( document.documentElement && document.documentElement.scrollTop ) {
scrolledX = document.documentElement.scrollLeft;
scrolledY = document.documentElement.scrollTop;
} else if( document.body ) {
scrolledX = document.body.scrollLeft;
scrolledY = document.body.scrollTop;
}
 
var centerX, centerY;
if( self.innerHeight ) {
centerX = self.innerWidth;
centerY = self.innerHeight;
} else if( document.documentElement && document.documentElement.clientHeight ) {
centerX = document.documentElement.clientWidth;
centerY = document.documentElement.clientHeight;
} else if( document.body ) {
centerX = document.body.clientWidth;
centerY = document.body.clientHeight;
}
 
var leftOffset = scrolledX + (centerX - 450) / 2;
var topOffset = scrolledY + (centerY - 400) / 2;
 
document.getElementById("styled_popup").style.top = topOffset + "px";
document.getElementById("styled_popup").style.left = leftOffset + "px";
}
 

function fadeOutMyPopup() {
for( var i = 0 ; i <= 100 ; i++ ) {
setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}
 
setTimeout('closeMyPopup()', 800 );
}
 
function closeMyPopup() {
document.getElementById("styled_popup").style.display = "none"
}
 
function fireMyPopup() {
setOpacity( 0 );
myPopupRelocate();
document.getElementById("styled_popup").style.display = "block";
document.body.onscroll = myPopupRelocate;
window.onscroll = myPopupRelocate;
document.getElementById("styled_popup").style.display = "block";
fadeInMyPopup();
}
document.body.onload = window.setTimeout("fireMyPopup()", 15000);
</script>
 

Schlie�en

Ich hoffe, dass meine Idee und Inspiration sehr gut ankommen, trotz der vielen Fehler.

Ich bedanke mich herzlichst für Erklärungen und die nette Hilfe.

Mit herzlichen Grüßen

Daishi

Daishi

Wolfgang und Anne finden das Top!

Antworten

#2 | Fehlersuche: PopUp-Info für den Gast datum

27.02.2024 18:35 (zuletzt bearbeitet: 10.04.2024 15:05)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3321
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1252

Fehlersuche - PopUp-Info für den Gast
Aktualisiert 10.04.24

Hallo DaishiDas ist mal wieder eine super Idee, um mehr über das Forum zu erfahren!
Ich habe mir oft Gedanken gemacht, wie man einem Gast mitteilen kann, was alles im Forum als Mitglied möglich ist!
Wichtige oder besondere Features werden oft nur als Mitglied freigeschaltet!
In einigen Foren steht auch nur "Für Gäste nicht einsehbar"!
Für private Foren ist das die beste Lösung!
Ich habe es hier im Forum so gehalten, das es an der Funktionalität für Gäste nur bedingte Einschränkungen gibt!
Ich denke, dass es auch eine gute Möglichkeit ist Interesse und Neugier zu wecken!

Lösung - Was ist mir aufgefallen, was habe ich gemacht?

Was kann das Skript?

Das Skript wird als erstes ausgeblendet!
Nach einer festgelegten Zeit, hier 15 Sekunden erscheint die Info mit der Forenübersicht für den Gast!
Über das "X" lässt sich das Fenster wieder schließen!
Eine Speicherung gibt es hier z.Z. nicht, lässt sich aber nachrüsten, denke ich!
Funktioniert auch im Xobor (v6)

Wo war der Fehler, was habe ich geändert?

Als erstes habe ich das Skript geordnet, um zu sehen, wo ein Container anfängt und wo er aufhört! Hier war kein Fehler zu finden Top!
Wie aus den Bildern zu sehen ist, verschwindet das Fenster hinter den Titelleiste der Seite!
Hier kann man meistens mit "z-index" die Lage festlegen, hat auch funktioniert! Das war es auch schon fast....
Habe noch die Classes mit der Class des Hauptcontainers erweitert, damit die forumeigene CSS und umgekehrt nicht beeinflusst wird!
Zusätzlich haben neue und bereits vorhandene Classes Werte bekommen!
Damit nur Gäste die Info sehen, war noch eine IF-Anweisung erforderlich.
Dadurch ist es auch möglich auf ein Plugin zu verzichten und alles in die "Kopf- oder Fußzeile" zu kopieren!

Installation für alle Templates & Mobil

Beschreibung

Das JavaScript kann für die Template (v1-4) in die Kopf- oder Fußzeile kopiert werden.
Für das neue Xobor V6 & Mobil nach Eigenes Javascript.

In Zeile 221 kann man die Zeit einstellen, die vergeht, bis das Fenster angezeigt wird (hier 15 Sekunden)!
Durch ändern der Zahl in Zeile 190 kann das Fenster aus der Mitte weiter nach oben gerückt werden!
Werte von 2-20 sind sinnvoll!

KontaktWichtig! In Zeile 136 muss noch der Kontakt-Link eingetragen werden. Kann ein Forum-Link für Gäste sein oder eine Email-Adresse!

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
 
<style>
.PopUp {
  text-align:left;
  max-width: 600px; 
  height: auto; 
  display: none; 
  position: absolute; 
  opacity: 1;
  z-index:9999;
}
.PopUp .side-body {
  font-size: 10px;
  color: #C9C9C9;
  background: #454241;
  padding: 1px;
  box-shadow: 0px 0px 10px 0px Dimgrey;
}
.PopUp td {
  font-family: "trebuchet ms", Verdana, Tahoma, Arial, Sans-Serif;
  font-size: 12px;
}
.PopUp .tbl1 {
  padding: 4px;
}
.PopUp .tbl1 a {
  font-size: 14px;
  color: #C9C9C9;
  font-weight: bold;
}
.PopUp .tbl1 a:hover {
  color: #aaaaff;
}
.PopUp .tbl2 {
  font-size: 12px;
  background: #454241;
  padding: 4px;
}
.PopUp .tbl3 {
  background: linear-gradient(0deg, #000000 0%, #aaaaaa 50%, #000000 100%); 
  height:40px;
}
.PopUp .tbl4 {
  background: linear-gradient(0deg, #000000 0%, #aaaaaa 50%, #000000 100%); 
  width:40px; 
  height:40px;
  text-align:right;
}
.PopUp .tbl5 {
  color:white; 
  font-size:18px; 
  font-weight:bold;
}
.PopUp .tbl6 {
  font-size: 14px;
  color: #C9C9C9;
  font-weight: normal;
}
.PopUp a img {
  filter: brightness(80%);
}
.PopUp a:hover img {
  filter: brightness(100%);
}
 
</style>
 
<div id="styled_popup" class="PopUp" name="styled_popup">
  <table width="80%" cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
      <td class="tbl3">
	<center class="tbl5">Willkommen lieber Gast></center>
      </td>
      <td class="tbl4">
	<a href="javascript:fadeOutMyPopup();"><img src="//files.homepagemodules.de/b104774/a_736_491f70c9.png" width="25px"></a>
      </td>
    </tr>
    <tr>
      <td colspan="2" class="side-body">
	<table border="0" width="100%" class="tbl2">
	  <tbody><tr>
            <td class="tbl1" style="padding:15px;">
              <a href="./anmeldung.php" title="Kostenlos registrieren">Registriere Dich völlig kostenlos und nutze alle Features dieser Seite.</a>
 
              <br><br>Als registrierter Benutzer hast Du einige Vorteile mehr!
              <br>In der Tabelle kannst Du die Unterschiede zwischen Mitgliedern und Gästen sehen.
              <hr>
	      <table cellpadding="0" cellspacing="2" width="100%" class="tbl-border">
		<tbody><tr>
		  <td class="tbl1"><b>Möglichkeiten:</b></td> <td class="tbl1"><center><b>Gast</b></center></td> <td class="tbl1"><center><b>Mitglied:</b></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Zugriff auf die gesamte Seite.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>  
		  <td class="tbl1">Profile mit Foto-Album.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Lesen und schreiben im Forum.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Benutzen der Shoutbox.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Ein persönliches Gästebuch</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
 
		<tr>
		  <td class="tbl1">Kontakt zu anderen Mitgliedern.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Schreiben von Kommentaren zu den Inhalten der Seite.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Keine Anzeige dieser nervigen Nachricht.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1 tbl6" colspan="3">
		  <hr>Wenn Du Probleme hast bei der Registrierung,
                  <br>kontaktiere bitte den Webmaster
                  <a href="mailto:email@example.com?subject=Ich habe ein Problem mit der Registrierung" title="Kontakt zum Webmaster"><i>HIER</i></a>.
                  </td>
		</tr>             
                </tbody>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
      </td>
    </tr>
    </tbody>
  </table>
</div>
 
 
<script>
// Browsersichere Funktion zur Behandlung der Deckkraft
 
function setOpacity( value ) {
  document.getElementById("styled_popup").style.opacity = value / 10;
  document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
 
function fadeInMyPopup() {
  for( var i = 0 ; i <= 100 ; i++ )
  setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}
function myPopupRelocate() {
  var scrolledX, scrolledY;
  if( self.pageYOffset ) {
    scrolledX = self.pageXOffset;
    scrolledY = self.pageYOffset;
  } else if( document.documentElement && document.documentElement.scrollTop ) {
    scrolledX = document.documentElement.scrollLeft;
    scrolledY = document.documentElement.scrollTop;
  } else if( document.body ) {
    scrolledX = document.body.scrollLeft;
    scrolledY = document.body.scrollTop;
  }
 
  var centerX, centerY;
  if( self.innerHeight ) {
    centerX = self.innerWidth;
    centerY = self.innerHeight;
  } else if( document.documentElement && document.documentElement.clientHeight ) {
    centerX = document.documentElement.clientWidth;
    centerY = document.documentElement.clientHeight;
  } else if( document.body ) {
    centerX = document.body.clientWidth;
    centerY = document.body.clientHeight;
  }
 
  var leftOffset = scrolledX + (centerX - 450) / 2;
  var topOffset = scrolledY + (centerY - 400) / 2;
 
  document.getElementById("styled_popup").style.top = topOffset + "px";
  document.getElementById("styled_popup").style.left = leftOffset + "px";
}
 
 
function fadeOutMyPopup() {
  for( var i = 0 ; i <= 100 ; i++ ) {
  setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}
 
setTimeout('closeMyPopup()', 800 );
}
 
function closeMyPopup() {
  document.getElementById("styled_popup").style.display = "none"
}
 
function fireMyPopup() {
  setOpacity( 0 );
  myPopupRelocate();
  document.getElementById("styled_popup").style.display = "block";
  document.body.onscroll = myPopupRelocate;
  window.onscroll = myPopupRelocate;
  document.getElementById("styled_popup").style.display = "block";
  fadeInMyPopup();
}
 
window.addEventListener('load', function(){ 
  if($('#link_login, .guest_view').length){
    document.body.onload = window.setTimeout("fireMyPopup()", 15000);
  };
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Nachtrag

Nochmals überarbeitet (28.02.24)!

Bis dann und nochmal besten Dank an Daishi!
Wolfgang

Anne, Daishi und Elvenar-Fan-Forum finden das Top!

Antworten

Moderations-Kommentar:

Text überarbeitet, Formatierungen nochmals angepasst!
Grafiken aktualisiert!

#3 | RE: Fehlersuche: PopUp-Info für den Gast datum

27.02.2024 19:38 (zuletzt bearbeitet: 29.02.2024 01:24)

Das ist wieder total super geworden Wolfgang.

Antworten

#4 | PopUp-Info für den Gast - Zustand speichern? datum

27.02.2024 22:27 (zuletzt bearbeitet: 29.02.2024 01:25)

Hallo zusammen

Kann man das so einstellen dieses Pop-Up Fenster, dass wenn man es schließt, auch dann nicht wieder erscheint? Also geschlossen bleibt?
Oder oben am Rand fest bleibt und nicht mitscrollt?

lg

Antworten

#5 | RE: PopUp-Info für den Gast - Zustand speichern? datum

27.02.2024 23:31 (zuletzt bearbeitet: 29.02.2024 01:25)

Anne

Informationen anzeigen

Beitr�ge:	221
Registriert seit:	21.08.2021

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	81

Ich habe es soweit hinbekommen.

Habe in Zeile 6 nur die Position geändert. Von absolute in static geändert

1
 
position: static;

Jetzt ist es natürlich links am Rand und würde es gerne als center machen.

Antworten

#6 | RE: PopUp-Info für den Gast - Zustand speichern? datum

29.02.2024 01:14 (zuletzt bearbeitet: 14.04.2024 01:07)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3321
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1252

PopUp-Info für den Gast - Zustand speichern
Aktualisiert 10.04.24

@Daishi

Hallo Anne

Habe da etwas ganz besonders gefunden, dass vielen Wünschen gerecht wird!

Mit dem folgenden Vorschlag ist es möglich die PopUp-Information für Gäste oder einer bestimmten Benutzergruppen anzeigen zu lassen!
Wird auf das "X" geklickt, wird der Zustand für z.B. einen Tag gespeichert, kann aber beliebig auf z.B. einer Woche (7Tg) verlängert werden!
Das Wiederanzeigen bei einem Seiten-Reload entfällt! Auch das mitscrollen des Anzeigefensters habe ich herausgenommen! Die Farben habe ich von Dir übernommen!
Ein kleine Trick, um tageweise die Info anzeigen zu lassen liegt in der Nutzung des Xobor-Plugins "Globale Nachricht"! Dadurch entfällt auch das große JavaScript!
Es gibt 3 Möglichkeiten das Skript einzusetzen!
1. Das Skript mit Xobor-Plugin, um das Skript tageweise anzuzeigen!
2. Das Skript ohne Xobor-Plugin, wird beim Seiten-Reload und Seitenwechsel neu aufgerufen!
3. Mit Sitzungs-Cookie für Zustandsspeicherung! Das Info-Fenster wird erst wieder angezeigt, wenn der Browser oder der Browser-TAB geschlossen und wieder aufgerufen wurde!

Installation für alle Templates & Mobil

1. Wie geht es mit dem Xobor-Plugin? Ohne Anzeigeverzögerung, tageweises Speichern

Es hat sich gezeigt, dass die Version 1 für mobile Endgeräte und Xobor (v6) ungeeignet ist!
Empfehlung: Installation Version 3!

Als erstes muss das Xobor-Plugins "Globale Nachricht" installiert werden!
Unter "Welche Gruppe soll die Benachrichtigung sehen können?", "Gäste" oder auch eine andere spezielle andere Benutzergruppe anhaken!
Unter "Style der Benachrichtigungsbox", "Standard-Design (anpassbar)" auswählen!
Wenn notwendig unter "Cookie Lebenszeit" die Wiederholung ändern, evtl. auf 7 Tage!
Das folgende Skript unter "Nachricht" eintragen!

In Zeile 8 wird der Abstand zum oberen Rand eingestellt!
In Zeile 20, 21, 34, 38, 42, 46,50 und 62 können die Farben angepasst werden! Fürs schwarze Design stehen die Farben auskommentiert dahinter!
In Zeile 144 steht wieder die Kontaktadresse!

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
<style>
.notification_wrapper {
  position:absolute !important;
  top:-100px !important;
}
.PopUp {
  position:absolute; 
  top:200px;
  left:0;
  right:0;
  margin: auto;
  text-align:left;
  max-width: 600px; 
  height: auto; 
  opacity: 1;
  z-index:9999;
}
.PopUp .side-body {
  font-size: 10px;
  color: #000000; /* color: #C9C9C9; */
  background: #aaaaaa; /* background: #454241; */
  padding: 1px;
  box-shadow: 0px 0px 10px 0px Dimgrey;
}
.PopUp td {
  font-family: "trebuchet ms", Verdana, Tahoma, Arial, Sans-Serif;
  font-size: 12px;
}
.PopUp .tbl1 {
  padding: 4px;
}
.PopUp .tbl1 a {
  font-size: 14px;
  color: #000000 !important; /* #C9C9C9; */
  font-weight:bold;
}
.PopUp .tbl1 a:hover {
  color: #555588 !important; /* #aaaaff; */
}
.PopUp .tbl2 { 
  font-size: 12px;
  background: #dedede; /* #454241; */
  padding: 4px;
}
.PopUp .tbl3 {margin:auto;right:0; left:0;
  background: linear-gradient(0deg, #dedede 0%, #aaaaaa 50%, #dedede 100%); /* background: linear-gradient(0deg, #000000 0%, #aaaaaa 50%, #000000 100%); */
  height:40px;
}
.PopUp .tbl4 {
  background: linear-gradient(0deg, #dedede 0%, #aaaaaa 50%, #dedede 100%); /* background: linear-gradient(0deg, #000000 0%, #aaaaaa 50%, #000000 100%); */
  width:40px;
  height:40px;
  text-align:right;
}
.PopUp .tbl5 {
  color:#454241; 
  font-size:18px; 
  font-weight:bold;
}
.PopUp .tbl6 {
  font-size: 14px;
  color: #000000; /* color: #C9C9C9; */
  font-weight: normal;
}
.PopUp a img {
  filter: brightness(80%);
}
.PopUp a:hover img {
  filter: brightness(100%);
}
</style>
 

<br> 
<div id="styled_popup" class="PopUp" name="styled_popup">
  <table width="80%" cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
      <td class="tbl3">
	<center class="tbl5">Willkommen lieber Gast></center>
      </td>
      <td class="tbl4">
	<a href="#" onclick="close_notification()"><img src="//files.homepagemodules.de/b104774/a_736_491f70c9.png" width="25px"></a>
      </td>
    </tr>
    <tr>
      <td colspan="2" class="side-body">
	<table border="0" width="100%" class="tbl2">
	  <tbody><tr>
            <td class="tbl1" style="padding:15px;">
              <a href="./anmeldung.php" title="Kostenlos registrieren">Registriere Dich völlig kostenlos und nutze alle Features dieser Seite.</a>
 
              <br><br>Als registrierter Benutzer hast Du einige Vorteile mehr!
              <br>In der Tabelle kannst Du die Unterschiede zwischen Mitgliedern und Gästen sehen.
              <hr>
	      <table cellpadding="0" cellspacing="2" width="100%" class="tbl-border">
		<tbody><tr>
		  <td class="tbl1"><b>Möglichkeiten:</b></td> <td class="tbl1"><center><b>Gast</b></center></td> <td class="tbl1"><center><b>Mitglied:</b></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Zugriff auf die gesamte Seite.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>  
		  <td class="tbl1">Foto-Album.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Lesen und schreiben im Forum.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Ganz viel Spaß in London.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Ein persönliches Gästebuch</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
 
		<tr>
		  <td class="tbl1">Super nette Mitglieder.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Bewerten von Beiträgen.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Keine Anzeige dieser nervigen Nachricht.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1 tbl6" colspan="3">
		  <hr>Wenn Du Probleme hast bei der Registrierung,
                  <br>kontaktiere uns 
                  <a href="http://www.londonmagic.de/t180f60983-Fragen-amp-Antworten.html" title="Fragen und Antworten"><i>Hier</i></a>.
                  </td>
		</tr>             
                </tbody>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
      </td>
    </tr>
    </tbody>
  </table>
</div>
<br>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Schlie�en

2. PopUp-Info ohne Xobor-Plugin, ohne Anzeigeverzögerung, ohne Speicherung

Hier folgt ein weiterer Vorschlag, falls kein Xobor-Plugin mehr installiert werden kann (kostenloses Forum)
Das folgende Skript hat keine Speicherung und keine Zeitverzögerung und wird beim Aufruf der Webseite sofort angezeigt.
Mit einem Klick auf das "X" verschwindet das Info-Fenster! Beim Aufruf einer neuen Seite oder beim Seiten-Reload wird es wieder angezeigt, kann aber weggescrollt werden!

Beschreibung

Das JavaScript kann für die Template (v1-4) in die Kopf- oder Fußzeile kopiert werden.
Für das neue Xobor V6 & Mobil nach Eigenes Javascript.

In Zeile 5 wird der Abstand zum oberen Rand eingestellt!
In Zeile 17, 18, 31, 35, 39, 43, 47 und 59 können die Farben angepasst werden! Fürs schwarze Design stehen die Farben auskommentiert dahinter!
In Zeile 141 steht wieder die Kontaktadresse!

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
 
<style>
.PopUp {
  display: none; 
  position:absolute; 
  top:170px;
  left:0;
  right:0;
  margin: auto;
  text-align:left;
  max-width: 600px; 
  height: auto; 
  opacity: 1;
  z-index:9999;
}
.PopUp .side-body {
  font-size: 10px;
  color: #000000; /* color: #C9C9C9; */
  background: #aaaaaa; /* background: #454241; */
  padding: 1px;
  box-shadow: 0px 0px 10px 0px Dimgrey;
}
.PopUp td {
  font-family: "trebuchet ms", Verdana, Tahoma, Arial, Sans-Serif;
  font-size: 12px;
}
.PopUp .tbl1 {
  padding: 4px;
}
.PopUp .tbl1 a {
  font-size: 14px;
  color: #000000; /* #C9C9C9; */
  font-weight:bold;
}
.PopUp .tbl1 a:hover {
  color: #555588; /* #aaaaff; */
}
.PopUp .tbl2 { 
  font-size: 12px;
  background: #dedede; /* #454241; */
  padding: 4px;
}
.PopUp .tbl3 {margin:auto;right:0; left:0;
  background: linear-gradient(0deg, #dedede 0%, #aaaaaa 50%, #dedede 100%); /* background: linear-gradient(0deg, #000000 0%, #aaaaaa 50%, #000000 100%); */
  height:40px;
}
.PopUp .tbl4 {
  background: linear-gradient(0deg, #dedede 0%, #aaaaaa 50%, #dedede 100%); /* background: linear-gradient(0deg, #000000 0%, #aaaaaa 50%, #000000 100%); */
  width:40px;
  height:40px;
  text-align:right;
}
.PopUp .tbl5 {
  color:#454241; 
  font-size:18px; 
  font-weight:bold;
}
.PopUp .tbl6 {
  font-size: 14px;
  color: #000000; /* color: #C9C9C9; */
  font-weight: normal;
}
.PopUp a img {
  filter: brightness(80%);
}
.PopUp a:hover img {
  filter: brightness(100%);
}
</style>
 

<br> 
<div id="styled_popup" class="PopUp" name="styled_popup">
  <table width="80%" cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
      <td class="tbl3">
	<center class="tbl5">Willkommen lieber Gast></center>
      </td>
      <td class="tbl4">
	<a href="#"><img src="//files.homepagemodules.de/b104774/a_736_491f70c9.png" width="25px"></a>
      </td>
    </tr>
    <tr>
      <td colspan="2" class="side-body">
	<table border="0" width="100%" class="tbl2">
	  <tbody><tr>
            <td class="tbl1" style="padding:10px;">
              <a href="./anmeldung.php" title="Kostenlos registrieren">Registriere Dich völlig kostenlos und nutze alle Features dieser Seite.</a>
 
              <br><br>Als registrierter Benutzer hast Du einige Vorteile mehr!
              <br>In der Tabelle kannst Du die Unterschiede zwischen Mitgliedern und Gästen sehen.
              <hr>
	      <table cellpadding="0" cellspacing="2" width="100%" class="tbl-border">
		<tbody><tr>
		  <td class="tbl1"><b>Möglichkeiten:</b></td> <td class="tbl1"><center><b>Gast</b></center></td> <td class="tbl1"><center><b>Mitglied:</b></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Zugriff auf die gesamte Seite.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>  
		  <td class="tbl1">Foto-Album.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Lesen und schreiben im Forum.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Ganz viel Spaß in London.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Ein persönliches Gästebuch</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
 
		<tr>
		  <td class="tbl1">Super nette Mitglieder.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Bewerten von Beiträgen.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Keine Anzeige dieser nervigen Nachricht.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1  tbl6" colspan="3">
		  <hr>Wenn Du Probleme hast bei der Registrierung,
                  <br>kontaktiere uns 
                  <a href="http://www.londonmagic.de/t180f60983-Fragen-amp-Antworten.html" title="Fragen und Antworten"><i>Hier</i></a>.
                  </td>
		</tr>             
                </tbody>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
      </td>
    </tr>
    </tbody>
  </table>
</div>
<br>
 
 
<script>
window.addEventListener('load', function(){ 
  if($('#link_login, .guest_view').length){
    $('.PopUp').fadeIn(1000);
    $('.PopUp .tbl4').on('click',function(){
      $('.PopUp').fadeOut(1000);
    });
  };
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

3. PopUp-Info ohne Xobor-Plugin, ohne Anzeigeverzögerung, mit Sitzungs-Cookie (Zustandsspeicherung)

Hier folgt ein idealer Vorschlag, ohne Xobor-Plugin!
Das folgende Skript kann das Ausblenden über eine Sitzungs-Cookie speichern und hat keine Anzeigeverzögerung.
Mit einem Klick auf das "X" verschwindet das Info-Fenster! Beim Aufruf einer neuen Seite oder beim Seiten-Reload wird es nicht wieder angezeigt!
Das Info-Fenster wird erst nach Schießen und wieder Öffnen des Browsers oder eines Browser-TAB's angezeigt!

Beschreibung

Das JavaScript kann für die Template (v1-4) in die Kopf- oder Fußzeile kopiert werden.
Für das neue Xobor V6 & Mobil nach Eigenes Javascript.

In Zeile 5 wird der Abstand zum oberen Rand eingestellt!
In Zeile 17, 18, 31, 35, 39, 43, 47 und 59 können die Farben angepasst werden! Fürs schwarze Design stehen die Farben auskommentiert dahinter!
In Zeile 141 steht wieder die Kontaktadresse!
In Zeile 163 wird das Info-Fenster ausgeblendet, in Zeile 166 wird der Zustand gespeichert!
In Zeile 171-173 wird überprüft ob das Sitzungs-Cookie vorhanden ist oder nicht!

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
 
<style>
.PopUp {
  display: none; 
  position:absolute; 
  top:170px;
  left:0;
  right:0;
  margin: auto;
  text-align:left;
  max-width: 600px; 
  height: auto; 
  opacity: 1;
  z-index:9999;
}
.PopUp .side-body {
  font-size: 10px;
  color: #000000; /* color: #C9C9C9; */
  background: #aaaaaa; /* background: #454241; */
  padding: 1px;
  box-shadow: 0px 0px 10px 0px Dimgrey;
}
.PopUp td {
  font-family: "trebuchet ms", Verdana, Tahoma, Arial, Sans-Serif;
  font-size: 12px;
}
.PopUp .tbl1 {
  padding: 4px;
}
.PopUp .tbl1 a {
  font-size: 14px;
  color: #000000; /* #C9C9C9; */
  font-weight:bold;
}
.PopUp .tbl1 a:hover {
  color: #555588; /* #aaaaff; */
}
.PopUp .tbl2 { 
  font-size: 12px;
  background: #dedede; /* #454241; */
  padding: 4px;
}
.PopUp .tbl3 {margin:auto;right:0; left:0;
  background: linear-gradient(0deg, #dedede 0%, #aaaaaa 50%, #dedede 100%); /* background: linear-gradient(0deg, #000000 0%, #aaaaaa 50%, #000000 100%); */
  height:40px;
}
.PopUp .tbl4 {
  background: linear-gradient(0deg, #dedede 0%, #aaaaaa 50%, #dedede 100%); /* background: linear-gradient(0deg, #000000 0%, #aaaaaa 50%, #000000 100%); */
  width:40px;
  height:40px;
  text-align:right;
}
.PopUp .tbl5 {
  color:#454241; 
  font-size:18px; 
  font-weight:bold;
}
.PopUp .tbl6 {
  font-size: 14px;
  color: #000000; /* color: #C9C9C9; */
  font-weight: normal;
}
.PopUp a img {
  filter: brightness(80%);
}
.PopUp a:hover img {
  filter: brightness(100%);
}
</style>
 

<br> 
<div id="styled_popup" class="PopUp" name="styled_popup">
  <table width="80%" cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
      <td class="tbl3">
	<center class="tbl5">Willkommen lieber Gast></center>
      </td>
      <td class="tbl4">
	<a href="#"><img src="//files.homepagemodules.de/b104774/a_736_491f70c9.png" width="25px"></a>
      </td>
    </tr>
    <tr>
      <td colspan="2" class="side-body">
	<table border="0" width="100%" class="tbl2">
	  <tbody><tr>
            <td class="tbl1" style="padding:10px;">
              <a href="./anmeldung.php" title="Kostenlos registrieren">Registriere Dich völlig kostenlos und nutze alle Features dieser Seite.</a>
 
              <br><br>Als registrierter Benutzer hast Du einige Vorteile mehr!
              <br>In der Tabelle kannst Du die Unterschiede zwischen Mitgliedern und Gästen sehen.
              <hr>
	      <table cellpadding="0" cellspacing="2" width="100%" class="tbl-border">
		<tbody><tr>
		  <td class="tbl1"><b>Möglichkeiten:</b></td> <td class="tbl1"><center><b>Gast</b></center></td> <td class="tbl1"><center><b>Mitglied:</b></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Zugriff auf die gesamte Seite.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>  
		  <td class="tbl1">Foto-Album.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Lesen und schreiben im Forum.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Ganz viel Spaß in London.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Ein persönliches Gästebuch</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
 
		<tr>
		  <td class="tbl1">Super nette Mitglieder.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Bewerten von Beiträgen.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1">Keine Anzeige dieser nervigen Nachricht.</td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_738_bc37cd7b.png" width="15px" height="15px"></center></td>
		  <td class="tbl1"><center><img src="//files.homepagemodules.de/b104774/a_737_1a5b260d.png" width="15px" height="15px"></center></td>
		</tr>
		<tr>
		  <td class="tbl1  tbl6" colspan="3">
		  <hr>Wenn Du Probleme hast bei der Registrierung,
                  <br>kontaktiere uns 
                  <a href="http://www.londonmagic.de/t180f60983-Fragen-amp-Antworten.html" title="Fragen und Antworten"><i>Hier</i></a>.
                  </td>
		</tr>             
                </tbody>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
      </td>
    </tr>
    </tbody>
  </table>
</div>
<br>
 
 
<script>
window.addEventListener('load', function(){ 
  if($('#link_login, .guest_view').length){
    $('.PopUp').fadeIn(1000);
    $('.PopUp .tbl4').on('click',function(){
      $('.PopUp').fadeOut(1000);
 
      // Sitzungscookie setzen - Zustand speichern
      sessionStorage.setItem('popup_Cook','true');
    });
  };
 
  // Sitzungscookie auslesen
  if (sessionStorage.getItem('popup_Cook') == 'true'){
    $('.PopUp').hide();
  };
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Bis dann, gutes Gelingen,
und nochmal ein ganz großes Lob an Daishi für seine Idee und seine Arbeit!

Wolfgang

Daishi findet das Top!

Antworten

Moderations-Kommentar:

Beitrag überarbeitet, Grafiken aktualisiert!
Neues Skript mit Sitzungs-Cookie für Zustandsspeicherung eingefügt!

#7 | RE: PopUp-Info für den Gast - Zustand speichern? datum

29.02.2024 07:58

Wow Wolfgang, das ist total super. Ein ganz dickes großes Lob und Dankeschön für deine Mühe und Arbeit.

Funktioniert super in Globale Nachrichten.

Wolfgang findet das Top!

Antworten

#8 | RE: PopUp-Info für den Gast - Zustand speichern? datum

01.03.2024 08:40

Ich wollte schon folgendes schreiben:
Mhh, hab alles nach Beschreibung ins Testforum eingetragen und abgespeichert = funktioniert irgendwie nicht.

Wenn man im PI "Globale Nachrichten bei "Welche Gruppe soll die Benachrichtigung sehen können?" den Admin anklicke, sollte der Admin die Nachricht lesen können. Das ist aber bei mir nicht der Fall. Das ist aber uninteressant, wenn ich mich auslogge funktioniert es für Gäste! Das ist ja das wichtigste.

Tolle Idee von Daishi, tolle Mitarbeit von Anne und wiedermal tolle Arbeit von Wolfgang.

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Antworten

#9 | PopUp-Info für spezielle Benutzergruppen? datum

01.03.2024 09:39

PopUp-Info für spezielle Benutzergruppen?

Hallo ArndtHinter "Bestimmte Benutzergruppe" hatte sich eine Idee versteckt!

Es sieht doch so aus, dass unter den normalen Benutzergruppen, wie "Admin, Moderatoren, Mitglieder und Gäste" auch spezielle Benutzergruppen angelegt werden können, wie z.B. "VIP-Mitglieder, Fotogruppe, Sportgruppe, ..."!
Hier könnten dann die speziellen Gruppen besondere Berechtigungen bekommen, die in einer angepassten Tabelle auch zu sehen sind!

Bis dann
Wolfgang

Antworten

#10 | RE: PopUp-Info für spezielle Benutzergruppen? datum

01.03.2024 10:25

Zitat von Kipper-Spedition im Beitrag #8
Ich wollte schon folgendes schreiben:
Mhh, hab alles nach Beschreibung ins Testforum eingetragen und abgespeichert = funktioniert irgendwie nicht.

Wenn man im PI "Globale Nachrichten bei "Welche Gruppe soll die Benachrichtigung sehen können?" den Admin anklicke, sollte der Admin die Nachricht lesen können. Das ist aber bei mir nicht der Fall. Das ist aber uninteressant, wenn ich mich auslogge funktioniert es für Gäste! Das ist ja das wichtigste.

Stopp, ich nehme meine Aussage zurück! Ich hatte das (erste) Skript noch in der Kopfzeile stehen - darum funktionierte das nicht! Das habe ich gelöscht, und es funktioniert.

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang, Anne und Daishi finden das Top!

Antworten

Profil: Last Online & Registrierungs-Datum anzeigen lassen � � Meine Idee und Inspiration (Daishi) - Audiodateien abspielen

Seite 1 von 2 � Seite 1 2 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Login PopUp-Fenster
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von bienchen 6 11.04.2024 00:08
Wolfgang • Zugriffe: 329
[Erledigt] In den Forenbeiträge für Gäste kein reCapcha
Erstellt im Forum Das neue Template Xobor (v6) von Mato 0 17.02.2022 14:30
Mato • Zugriffe: 287
Eigenes Kontaktformular für Gäste - HTML
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 7 26.08.2023 04:08
Daishi • Zugriffe: 2383
"Wer ist Online?" erweitern Teil (1-3) - Online-Zeitzähler!
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 7 22.04.2024 22:49
Anne • Zugriffe: 2454
"Wer ist online" für Gäste ausblenden?
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von bienchen 5 22.06.2020 21:33
bienchen • Zugriffe: 1352
Cookie Hinweis - Cookie Info
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 05.12.2018 17:21
Wolfgang • Zugriffe: 917
Infos zur SEO Agentur
Erstellt im Forum Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps von Liebel 1 18.06.2016 10:05
Wolfgang • Zugriffe: 4622
Bewertungen auch für Gäste einsehbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 4 03.01.2022 22:39
Anne • Zugriffe: 1163
Test - Schreibrechte für Gäste im Forum!
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 1 10.08.2018 10:38
Wolfgang • Zugriffe: 6198

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

78%