Login PopUp-Fenster

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 � Login PopUp-Fenster

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 | Login PopUp-Fenster datum

19.02.2024 12:43 (zuletzt bearbeitet: 29.02.2024 01:19)

Hallo zusammen, ich schon wieder.

Beim Gaia-Template hat man über dem Forum ja die Leiste, in welcher man sich einloggen kann.
Gibt es irgendeine Möglichkeit, ein Plugin oder was auch immer, um dieses mit einem Button zu gestalten und wenn dieser betätigt wird, ploppt ein Pop-up auf, in welchem "Benutzername" und "Passwort" Felder sind?

Ich hoffe ihr versteht, was ich meine. :)

LG

Wolfgang findet das Top!

Antworten

#2 | RE: Login PopUp-Fenster datum

19.02.2024 23:07 (zuletzt bearbeitet: 29.02.2024 01:19)

Danke @bienchen so etwas suche ich auch schon die ganze Zeit, weiß aber nicht, wie das erstellt wird.

So etwas in der Art meinst du, richtig?

bienchen und Wolfgang finden das Top!

Antworten

#3 | RE: Login PopUp-Fenster datum

19.02.2024 23:09 (zuletzt bearbeitet: 29.02.2024 01:19)

Ja so eines, welches eben aufploppt, wenn man einen Button z.B. betätigt. :D Genau!

Anne findet das Top!

Antworten

#4 | Login PopUp-Fenster - Teil 1+2 datum

22.02.2024 01:31 (zuletzt bearbeitet: 11.04.2024 00:13)

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

Login PopUp-Fenster - Mit und ohne Rahmen und Verlinkung - Teil 1
Aktualisiert 10.04.24

Hallo Bienchen Wollte Dich nicht so lange warten lassen!
Habe eine Lösung erstmal fürs Gaia gefunden!
Toller Effekt, im Modal-Modus!
Für die anderen Templates dauert es noch eine Weile!

Was kann das Skript?

Das Skript ist so aufgebaut, das kein Plugin zwingend notwendig ist!
Als Gast wird wie im Business-Template rechts oben ein Eingabe-Button-Fenster eingeblendet!
Wird der Eingabe-Button angeklickt öffnet sich die Login-Seite und nur das Login-Fenster wird modal angezeigt (siehe Bild)!
Wird das "X" oder ein anderer Link im Fenster angeklickt wird der Modal-Modus aufgelöst!
Neu! Optional ist es auch möglich nach einem Klick auf dem "X" zur Startseite zurückzukehren oder den Login mit minimaler Ausstattung anzeigen!
Ebenso kommt man aus dem Modal-Modus, wenn man sich eingeloggt hat!

Business-Template

Gaia-Template

Installation nur fürs Gaia & Business-Template

Neuer Button oben rechts

Schlie�en

Nur fürs Gaia-Template Das komplette Skript kommt in die "

In Zeile 110 wird die ursprüngliche Login-Leiste ausgeblendet!
Durch Zeile 121-124 wird der Login-Button erzeugt!
Mit Hilfe von Zeile 117 wird ein Abstand zum oberen Rand erzeugt, damit beim Minimieren oder bei kleinen Display der Button nichts verdeckt!
In Zeile 132-135 werden die DIV-Container für den Modal-Modus angelegt!
Durch Zeile 138 wird der Modal-Modus aufgerufen!
Mit Zeile 133 wird der Modalmodus durch ein Klick auf dem "x" wieder aufgehoben und man kehrt zur original Login-Seite zurück!

Optionen

Gibt man Zeile 134 frei und löscht Zeile 121 wird die Startseite nach einem Klick auf das "X" aufgerufen!
Gibt man Zeile 129 frei und löscht Zeile 128 wird das Login-Fenster mit Rahmen und allen Links angezeigt!
In Zeile 126 kann der Abstand der Startseite zum oberen Rand eingestellt werden (hier 80px)!

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
 
<style>
.login_box {
  z-index: 999999; 
  margin: -1px 0px 20px 50px;
  border: 1px solid #aaaaaa; 
  border-top: none; 
  background-color: #ffffff;    
  padding: 10px 15px; 
  position: absolute; 
  top:0px; 
  right:20px;
  border-radius: 0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius: 0px 0px 6px 6px; 
  max-width: 250px; 
  margin-right: 20px; 
  color: #383838;
  text-align:left !important;
}
.login_box div {
  margin-left:9px;
}
.login_box:hover {
  background-color: #cccccc;  
}
.login_box a {
  padding-left:10px;
  margin-bottom: 10px;
  border-bottom: 1px dotted #383838 !important; 
  text-decoration: none;
  color: #383838;
}
.login_form {
  position:absolute; 
  top:150px; 
  right:0; 
  left:0; 
  margin:auto; 
  max-width:500px; 
  background-color:#dddddd; 
  background: -moz-linear-gradient(#aaaaaa, #777777); background: -webkit-linear-gradient(#aaaaaa, #777777); background: -o-linear-gradient(#aaaaaa, #777777);
  padding:20px; 
  z-index:999999;
  border:2px solid #222222;
  border-radius:5px; 
}
.header_login { 
  display: block !important;
  padding: 6px 40px;
  background: #eeeeee !important;
  border-radius:6px; -moz-border-radius: 6px; -webkit-border-radius:6px;
  font-size: 13px;
  text-decoration: none;
  border: none;
}
 
.header_login small {
  font-size: 11px !important;
}
 
/* Modal-Modus */
.modalDia {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999999;
  opacity:0;
  transition: opacity 400ms ease-in; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDia:target {
  opacity:1;
  pointer-events: auto;
}
.modalDia div div div {
  padding:0 !important; margin:0 !important; 
}
.closelog {
  background: #aa2222;
  color: #ffffff !important;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px;
  box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000;
}
.closelog:hover {
  background: #cc2222;
}
 
/* Hilfe + Passwort vergessen löschen */
.login_form a small, .oauth_buttons {
/* display: none; */
} 
 
/* Facebook Login */
.oauth_buttons {
  margin: 10px 0;
}
 
/* Login-Leiste ausblenden - Gaia */
#foben_login_form{
  visibility:hidden !important;
}
</style>
 
 
<script>
window.addEventListener('load', function(){
 
if($('#link_login').length){
  if(!$('#login_form').length){
    $('.content').prepend(`
      <div class="login_box">
        <a href="./login.php" class="header_login">Einloggen »</a>
        <div><small>Neuer Benutzer? <a href="./anmeldung.php"><strong>Jetzt anmelden!</strong></a></small></div>
      </div>
   `);
   $('.content').css('margin-top','80px');
  } else {
    var login2 = $('#login_form').parent().parent().parent().html();
    // var login2 = $('#login_form').parent().html(); 
    
    $('.content').prepend(`
      <center><div id="openMod" class="modalDia"><div class="login_form">
        <a href="#close" title="Schließen" class="closelog">&#x2715;</a>
   <!-- <a href="./" title="Schließen" class="closelog">&#x2715;</a> -->
        `+login2+`</div></div></center>`);
 
    $('.closelog, .modalDia a b').on('click',function(){
      $('#openMod').remove();
    });
 
    location.href='#openMod';
  };
};
 
});
</script>
 

Schlie�en

Nur fürs Business-Template Das komplette Skript kommt in die "!
Wichtig! Unter "Admin > Layout > Farben & Einstellungen > Login-Box oben rechts für Gäste ausblenden" muss die Login-Box, muss die Option aktiviert werden und auf "nein" stehen!

In Zeile 94-97 werden die DIV-Container für den Modal-Modus angelegt!
Durch Zeile 100 wird der Modal-Modus aufgerufen!
Mit Zeile 95 wird der Modalmodus durch ein Klick auf dem "x" wieder aufgehoben und man kehrt zur original Login-Seite zurück!
Durch Zeile 108-113 ist es jetzt möglich mit der TAB-Taste zum Eingabefeld "Passwort" zu wechseln!

Optionen

Mit Hilfe von Zeile 87 kann ein zusätzlicher Abstand zum oberen Rand erzeugt werden, damit beim Minimieren oder bei kleinen Display der Button nichts verdeckt!
Gibt man Zeile 96 frei und löscht Zeile 95 wird die Startseite nach einem Klick auf das "X" aufgerufen!
Gibt man Zeile 90 frei und löscht Zeile 89 wird das Login-Fenster mit Rahmen, Titelleiste und allen Links angezeigt!

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
 
<style>
.login_form {
  position:absolute; 
  top:150px; 
  right:0; 
  left:0; 
  margin:auto; 
  max-width: 400px;
  background-color:#dddddd; 
  background: -moz-linear-gradient(#aaaaaa, #777777); background: -webkit-linear-gradient(#aaaaaa, #777777); background: -o-linear-gradient(#aaaaaa, #777777);
  z-index:999998;
  text-align: left;
  border-radius: 6px 6px 0 0;
}
 
/* Modal-Modus */
.modalDia {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity:0;
  transition: opacity 400ms ease-in; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDia #login_form {
  width: 95% !important;
}
.modalDia #pwforget_link { 
  display:none;
}
.modalDia:target {
  opacity:1;
  pointer-events: auto;
}
.modalDia .box {  
  margin:0 !important;
}
.modalDia .error {
  display: inline-block;
  padding: 5px 10px;
  margin: 20px auto !important;
  text-align: left;
}
.modalDia .boxheader {
  background: linear-gradient(0deg, #0000A1 0%, #4D7DDF 50%, #0000A1 100%) !important;
}
 
/* Facebook Login */
.modalDia .oauth_buttons {
  /* display:none; */
  float:left; 
  clear:both !important;
  margin-top: 20px;
}
 
.closelog {
  background: #aa2222;
  color: #ffffff !important;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  font-weight: bold;
  border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px;
  box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000;
  z-index:999999;
}
.closelog:hover {
  background: #cc2222;
}
</style>
 
 
<script>
window.addEventListener('load', function(){ 
       
if($('#link_login').length){
  if($('#login_form').length){
    $('.login_box').remove();
    // $('.content').css('margin-top','80px');
 
    var login = $('#login_wrap .boxcontent').html();
    // var login = $('#login_wrap').html();
    var error = $('#error_wrap').html();
 
    $('.content').prepend(`
      <center><div id="openMod" class="modalDia"><span id="error_wrap">`+error+`</span><div class="login_form">
        <a href="#close" title="Schließen" class="closelog" style="text-decoration:none !important;">&#x2715;</a>
        <!-- <a href="./" title="Schließen" class="closelog" style="text-decoration:none !important;">&#x2715;</a> -->
        <div class="box">`+login+`</div></div></div></center>
    `);
 
    window.location.href='#openMod'; 
    $('#login_username').focus();
 
    $('.closelog, #login_submit_button').on('click',function(){
      $('#openMod').remove();
      location.href='#close'; 
    });
 
    $('body').keyup(function(e) {
      var code = e.keyCode || e.which;
      if (code == '9') {
        $('#login_password').focus();
      }
    });
 
  };
};
 
});
</script>
 

Schlie�en

Bis dann und viel Erfolg!
Wolfgang

bienchen findet das Top!

Antworten

Moderations-Kommentar:

Beitrag nochmals überarbeitet.
Jetzt auch fürs Business-Template (v4)!
Optional ist es jetzt möglich, bei einem Klick auf das "X" nicht zur Login-Seite, sondern zur Startseite zurückzukehren!
Weiterhin kann das Login-Fenster minimal Ausstattung angezeigt werden!

#5 | RE: Login PopUp-Fenster datum

22.02.2024 13:18 (zuletzt bearbeitet: 29.02.2024 01:20)

Das ist toll, Wolfgang!
Mega Leistung, und vor allem so schnell <3

Ich hätte nur eine Frage, ich weiß nicht ob das geht .. aber wenn man den 'Button' Bzw. das Einloggen betätigt, ist es möglich, dass sich nur das fenster öffnet, ohne, dass die Seite auf die 'Einloggen-Seite' läd?

Ganz liebe Grüße und wirklich mega Arbeit!

Wolfgang findet das Top!

Antworten

#6 | Login PopUp-Fenster - Zurück zur Startseite - Teil 2 datum

23.02.2024 13:29 (zuletzt bearbeitet: 11.04.2024 00:08)

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

Login 'Pop-up'-Fenster - Zurück zur Startseite - Teil 2

Hallo BienchenDurch eine kleine Änderung im Schließen-Button kommt man bei einem Klick auf den X-Button zurück zur Startseite oder kann einen beliebigen Link aufrufen!

Wie geht es: Zurück zur Startseite

In Zeile 133, Zeile 91 im Business von Beitrag #4 befindet sich der Schließen-Button!
Hier braucht nur die Linkadresse eingetragen werden, die nach dem Schließen aufgerufen werden soll!
Da war's!

Zurück zur Startseite:

1
 
<a href="./" title="Schließen" class="closelog">X</a>

Zurück zum Portal:

1
 
<a href="/portal.html" title="Schließen" class="closelog">X</a>

Wolfgang

Gabriella findet das Top!

Antworten

#7 | Update: Login PopUp-Fenster - Business Template datum

11.04.2024 00:08 (zuletzt bearbeitet: 11.04.2024 00:14)

Update: Login PopUp-Fenster - Business Template

Kleines UpdateMit der TAB-Taste ist es jetzt möglich zum Eingabefeld "Passwort" zu wechseln, war vorher nicht möglich!
Zuständig ist hierfür Zeile 108-113!

Wolfgang

Antworten

Schriftarten ins Forum integrieren � � Profil: Last Online & Registrierungs-Datum anzeigen lassen

�hnliche Themen

Antworten

Letzter Beitrag

PopUp-Info für den Gast
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi 14 20.04.2024 08:14
Elvenar-Fan-Forum • Zugriffe: 735
Cookie-Fenster --> Das wäre eine elegante Lösung für Xobor-Foren
Erstellt im Forum Alles, was noch so �brig bleibt von 844er 1 05.08.2021 19:37
Wolfgang • Zugriffe: 1080

Business-Template V4: Login-Box im Portal ausblenden!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

22.08.2020 12:12
von

Wolfgang • Zugriffe: 627

Upload-Fenster immer automatisch in den Sichtbereich scrollen lassen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

16.05.2020 17:06
von

Wolfgang • Zugriffe: 695

Upload-Fenster und Upload-Links optisch anpassen (v1-4)!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

19.05.2023 11:38
von

Wolfgang • Zugriffe: 1029

Passwort beim Login anzeigen!
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 5 03.05.2020 20:50
Wolfgang • Zugriffe: 1516

Login-Leiste im Gaia und Portal-Box "Userinfo" modifizieren - Teil 1+2!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

12.01.2020 23:12
von

Wolfgang • Zugriffe: 2647

Webseite im neuen Fenster oder TAB öffnen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Magister 2 27.07.2016 18:41
Magister • Zugriffe: 690

Cursor automatisch ins Login-Eingabefeld setzen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

29.05.2011 21:22
von

Wolfgang • Zugriffe: 1666

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%