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 & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - 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 Elektronik & Elektrotechnik - Fragen & Antworten 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:	3591
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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:	3591
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

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

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

Mein Projekt Teilen Button � � Mehr Spoiler anlegen, mit verschiedener Optik

�hnliche Themen

Antworten

Letzter Beitrag

Popup-Fenster öffnet sich
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Anne 3 12.02.2025 03:16
Wolfgang • Zugriffe: 97
PopUp-Info für den Gast
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi 16 02.05.2024 19:21
Anne • Zugriffe: 1289
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: 1230

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: 752

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

30.03.2025 14:00
von

Dankeschön • Zugriffe: 882

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: 1200

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

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: 2952

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: 800

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: 45 €

65%

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

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

Update: Login PopUp-Fenster - Business Template

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