Wie erstelle ich ein Layer mit Button?

buzzom

buzzom

Mitglied
Guten Morgen,

ich möchte gerne so einer Art Layer programmieren, der bei Webseitenaufruf zunächst gestartet und über der Seite angezeigt wird. Darin soll ein Hinweis stehen, den der Benutzer, wenn möglich liest und unterhalb des Textes im Layer dann ein Knopf: "Ok, habe ich verstanden". Erst wenn er diesen betätigt, ist der Layer weg und der Rest der Seite steht zur freine Verfügung.

Kennt jemand ein Tutorial oder Anleitung im Netz dazu?

Vielen Lieben Dank
Eure Buzzi
 
Moin,

mit einem Link zu einem Tutorial bzw. einer Anleitung kann ich nicht dienen, dafür aber mit einem Code-Beispiel :)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-01-23" />

<title>tutorials.de</title>

<style type="text/css">
/* <![CDATA[ */
* {
    margin:0;
    padding:0;
}
html,body{
    height:100%;
}
#layer{
    visibility:visible;
    background-color:#999;
    position:fixed;
    left:0px;
    top:0px;
    z-index:2;
    width:100%;
    min-height:100%;
    height:auto !important;
    height:100%;
    text-align:center;
}
/* ]]> */
</style>

<script type="text/javascript">
/* <![CDATA[ */
function ShowHide(divid) {
     obj = document.getElementById(divid);
     obj.style.visibility = obj.style.visibility == 'visible' ? 'hidden' : 'hidden';
}
/* ]]> */
</script>

</head>
<body>

<p>Hier folgt der Seiteninhalt...</p>

<div id="layer">
     <form action="">
           <h1>Wichtige Hinweise</h1>
           <p>foobar</p>
           <p><input type="button" value="OK - Ich habe verstanden" onclick="ShowHide('layer');" /></p>
     </form>
</div>

</body>
</html>


mfg Maik
 
Vielen lieben dank. Das funktioniert ja schon ganz fantastisch. Aber wie kann ich es hinbekommen, dass der Layer so halb transparent über der Seite schwebt, also der Content schon darunter sichtbar ist, bzw an den Seiten. Der Layer ist ja in der MItte und kleiner als die Contentseite:

Also wie dieses hier bei Amazon: http://symptomat.de/test/screen.jpg


Vielen lieben dank
Buzzi
 
Zuletzt bearbeitet:
Hierfür stehen dir grundsätzlich zwei Techniken zur Auswahl:

  • Opacity-Eigenschaft bzw. -Filter
CSS: 
-moz-opacity:.5; /* für ältere Gecko-Browser */
opacity:.5; /* für standardkonforme Browser */
filter:alpha(opacity=50); /* für IE-Familie */
  • Halbtransparente PNG-Bilddatei als Hintergrundbild

Bei der erstgenannten Methode ist zu beachten, dass die Transparenz von den Browsern an die im Layer eingebundenen Elemente und Inhalte vererbt wird.

Wenn es wie auf dem amazon-Screenshot aussehen soll, wo der mittlere weiße Container keine Transparenz gegenüber dem darunterliegenden Seiteninhalt aufweist, ist dem PNG-Hintergrundbild der Vorzug zu geben.

mfg Maik
 
Wow, genial. Das geht ja richtig gut. Och, Mensch danke.

Darf ich noch eine letzte Frage stellen`? Ich machs einfach mal :)

Wie kann ich ne Session Sperre in diesen Layer einbauen. Also dass der Layer nur zb. alle 24 Stunden bei der Person auftaucht, solange die Session da ist. Sozusagen wenn er OK geklickt hat, ist für den Tag erstmal Ruhe mit dem Layer.
Sonst nervt es ja wenn jedesmal der tolle Layer aufpoppt.


Danke danke popanke!
Buzzi
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück