✔ Popup - Ohne Javascript ?

Status
Nicht offen für weitere Antworten.
M

michaelbeckemeyer

Grünschnabel
Hi ich hab ein einfaches problem ich brauche einen link, der ein popup öffnet.
ich moechte aber kein script in den header stellen weil der ins forum soll...
also muss ein einfacher HTML link her.
bitte helft mir is dringend
 
Beispiel für ein CSS-Popup:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.popup:::</title>

<style type="text/css">
<!--
body
{
margin: 0;
padding: 0;
background: #ffffff;
}

a.popup:link, a.popup:visited
{
margin: 10px;
display: block;
color: #000000;
}

a.popup:hover
{
background: #ffffff; /* Seitenhintergrundfarbe */
}

a.popup span /* PopUp-Box nicht anzeigen */
{
display: none;
}

a.popup:hover span /* PopUp-Box anzeigen */
{
display: block;
width: 200px;
background: #f5f5f5;
text-decoration: none;
}
-->
</style>

</head>
<body>

<a href="#" class="popup">Demo<span>InfoBox</span></a>

</body>
</html>
Variante mit absolut positionierten CSS-Popup:
Code: 
body
{
margin: 0;
padding: 0;
background: #ffffff;
}

a.popup:link, a.popup:visited
{
margin: 10px;
display: block;
color: #000000;
}

a.popup:hover
{
background: #ffffff; /* Seitenhintergrundfarbe */
}

a.popup span /* PopUp-Box nicht anzeigen */
{
display: none;
}

a.popup:hover span /* PopUp-Box anzeigen */
{
position: absolute;
left: 10px;
top: 50px;
display: block;
width: 200px;
background: #f5f5f5;
text-decoration: none;
}
Variante mit relativ positionierten CSS-Popup:
Code: 
body
{
margin: 0;
padding: 0;
background: #ffffff;
}

a.popup:link, a.popup:visited
{
margin: 10px;
display: block;
color: #000000;
}

a.popup:hover
{
background: #ffffff; /* Seitenhintergrundfarbe */
}

a.popup span /* PopUp-Box nicht anzeigen */
{
display: none;
}

a.popup:hover span /* PopUp-Box anzeigen */
{
position: relative;
left: 0;
top: -40px;
display: block;
width: 200px;
background: #f5f5f5;
text-decoration: none;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück