ilch Forum » Allgemein » HTML, PHP, SQL,... » PopUp-Login

Geschlossen
  1. Fr. 15.06.2012 11:52 Uhr #1
    User Pic
    jonnybravo_607 Mitglied
    Registriert seit
    30.03.2009
    Beiträge
    230
    Beitragswertungen
    6 Beitragspunkte
    Hallo liebe Community, ich möchte einen Loginbereich mit Popupfenster, so wie auf dem Beispiel Design (browse.deviantart.com/designs/?q=aerosol#/d2fdfwr).

    Wie setzte ich das um?

    Kann mir jemand die Code-Schnippsel geben zum rumprobieren.

    Wäre echt Cool von euch

    Gruß Jonny

    betroffene Homepage: browse.deviantart.com/designs/?q=aerosol#/d2fdfwr
    0 Mitglieder finden den Beitrag gut.
  2. Fr. 15.06.2012 12:23 Uhr #2
    User Pic
    iVirus Mitglied
    Registriert seit
    28.07.2008
    Beiträge
    1.250
    Beitragswertungen
    30 Beitragspunkte
    Schau dir mal von jQueryUI die API an..
    jqueryui.com/demos/dialog/

    1 login in ne div packen
    2 div auf display: none setzen und
    3 auf event (wahrscheinlich 'click') öffnen..

    um es mal extrem kurz zuhalten..
    btw. wichtig ist jquery / jqueryui im dom (head) zu laden..

    greez
    0 Mitglieder finden den Beitrag gut.
  3. Fr. 15.06.2012 12:27 Uhr #3
    User Pic
    jonnybravo_607 Mitglied
    Registriert seit
    30.03.2009
    Beiträge
    230
    Beitragswertungen
    6 Beitragspunkte
    Sorry versteh nur Bahnhof traurig
    0 Mitglieder finden den Beitrag gut.
  4. Fr. 15.06.2012 12:33 Uhr #4
    User Pic
    google.de Mitglied
    Registriert seit
    26.01.2012
    Beiträge
    352
    Beitragswertungen
    33 Beitragspunkte
    dann würde ich sagen ließ dich in jquery ein. Die Leute erwarten immer eine Homepage mit all den tollen sachen zu bekommen und wenig bis gar nichts dafür zu tun.

    Es wurde dir soebend gesagt wie du das realisieren kannst. Das einbinden ist nicht schwer und anhand der beispiele leicht zu erlernen. Auch gibt es genug tuts auf yt dafür


    Zuletzt modifiziert von google.de am 15.06.2012 - 12:34:04
    Kein Support per PN!
    Wenn ich zitiere ist dies KEIN Angriff auf die Person!
    0 Mitglieder finden den Beitrag gut.
  5. Fr. 15.06.2012 13:35 Uhr #5
    User Pic
    jonnybravo_607 Mitglied
    Registriert seit
    30.03.2009
    Beiträge
    230
    Beitragswertungen
    6 Beitragspunkte
    Gibt es die möglichkeit mit einem Javascript auch umzusetzen?

    ich habe es bisher so aber das funktioniert noch ned. 

    <style type="text/css">

.schrift {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFF;
	text-decoration: none;
}

.name {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #F00;
	text-decoration: none;
}

#posteingang a {
    background: url(include/images/login/Posteingang.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
}

#posteingang a {
    background: url(include/images/login/Posteingang.gif) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
}

#posteingang a:hover {
    background: url(include/images/login/Posteingang_hover.png) no-repeat;
	display: block;
    width: 25px;
    height: 25px;
}

#profil a {
    background: url(include/images/login/Profil.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
}

#profil a:hover {
    background: url(include/images/login/Profil_hover.png) no-repeat;
	display: block;
    width: 25px;
    height: 25px;
}
#profiledit a {
    background: url(include/images/login/Profiledit.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
}

#profiledit a:hover {
    background: url(include/images/login/Profiledit_hover.png) no-repeat;
	display: block;
    width: 25px;
    height: 25px;
}

#gallerie a {
    background: url(include/images/login/Gallerie.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
}

#gallerie a:hover {
    background: url(include/images/login/Gallerie_hover.png) no-repeat;
	display: block;
    width: 25px;
    height: 25px;
}

#logout a {
    background: url(include/images/login/Logout.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
}

#logout a:hover {
    background: url(include/images/login/Logout_hover.png) no-repeat;
	display: block;
    width: 25px;
    height: 25px;
}

#adminbereich a {
    background: url(include/images/login/Admin.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
}

#adminbereich a:hover {
    background: url(include/images/login/Admin_hover.png) no-repeat;
	display: block;
    width: 25px;
    height: 25px;
}

.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.5;
opacity:.50;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: fixed;
top: 10%;
left: 40%;
width: 306px;
height: 179px;
padding: 3px;
background-image:url(include/images/login/login-bg.png);
border: 2px solid #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: #2f2f2f;
z-index:1002;
overflow: auto;
}

#login a {
    background: url(include/images/login/Logout.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
}

#login a:hover {
    background: url(include/images/login/Logout_hover.png) no-repeat;
	display: block;
    width: 25px;
    height: 25px;
}

</style>
{POPUP}
<table width="150" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="21" align="left" valign="middle">&nbsp;<span class="schrift">Hallo</span> <span class="name">{NAME}</span></td>
  </tr>
  <tr>
    <td><table width="150" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="25" height="25" align="center" valign="middle"><div id="posteingang"><a href="index.php?forum-privmsg" title="Posteingang"></a></div></td>
        <td width="25" height="25" align="center" valign="middle"><div id="profil"><a href="#" title="Profil ansehen"></a></div></td>
        <td width="25" height="25" align="center" valign="middle"><div id="profiledit"><a href="index.php?user-8" title="Profil editieren"></a></div></td>
        <td width="25" height="25" align="center" valign="middle"><div id="gallerie"><a href="#" title="Usergallery"></a></div></td>
        <td width="25" height="25" align="center" valign="middle"><div id="logout"><a href="index.php?user-3" title="Ausloggen"></a></div></td>
        <td width="25" height="25"align="center" valign="middle"><div id="adminbereich"><a href="admin.php" target="_blank" title="Admin-Bereich"></a></div></td>
      </tr>
    </table></td>
  </tr>
</table>

{EXPLODE}
<table width="150" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="right" valign="middle"><span class="schrift">Login</span></td>
    <td width="25" height="25" align="right" valign="middle"><div id="login_pop"><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" title="Einloggen"><div id="login"><a href="#" title="Einloggen"></a></a></div></td>
  </tr>
</table>
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten