Bild / Grafik bei Seitenaufruf öffnen

Uwe Baake · 13. September 2014

Hallo zusammen,

ich würde gerne bei Aufruf der Startseite bei meiner Webseite ein Bild darstellen was anschließend mit einem X weggeklickt werden muss.
Beispiel hier: http://www.hr-online.de/website/radio/hr3/

Kann mir da einen Rat geben wie ich das am einfachsten machen kann.

wolf · 13. September 2014

Naja du baust das Bild in einen Kasten (div) Dann bekommt dieser via css folgende Werte:

CSS

#deinKasten{
    /*In die Mitte rücken*/
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* Werte aufjedenfall vergeben .. */
    width: 300px;
    height: 300px;
    /* nach 'vorne' holen */
    z-index: 1000;
    /* verstecken */
    display: none;
}

Alles anzeigen

Wenn du eine der Anweisungen nicht verstehst -> Googlen oder einfach nachfragen.
Das left,top ... sorgt dafür das die Box immer MIttig im Fenster platziert wird. (achtung: width und height sind wichtig )

Mit JavaScript tust du nun nach dem Laden der Seite (onload) dieser Box »display: block; zuweisen.
In der Box ist wieder eine Box mit dem »X« drinn .. beim klicken auf diese Box (onklick) gibst du der Außenrumbox einfach wieder »display: none«

Uwe Baake · 15. September 2014

CSS

<html>

<style type="text/css">




.plakat_wrapper {
background: rgba(0,0,0,0.75);
height: 100%;
position: fixed;
width: 100%;
z-index: 2000;
}
.plakat {
background-image: url('Wochenende.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
height: 800px;
margin: 100px 0 0 450px;
max-width: 600px;
position: absolute;
width: 100%;
z-index: 2010;
}
.plakat_close {
cursor: pointer;
font-size: 20px;
float: right;
padding: 10px;
}
a:hover {
color:#fff;
text-decoration:none;
}
.plakat_start {
text-align: center;
font-size: 17px;
line-height: 111%;
height: 700px;
margin: 0 auto;
padding: 0 15px;
max-width: 460px;
}




</style>




<body>




<div id="Kasten" style="z-index:1000; background: rgba(0,0,0,0); width: 100%; height: 100%; position: fixed; overflow:hidden">
<div class="plakat_wrapper"></div>
<div class="plakat">
<span class="plakat_close" onClick="document.getElementById('Kasten').style.display='none'">X</span>
</div>
</div>
</body>
</html>

Alles anzeigen

Danke für die Hilfe, mit dem Code habe ich es hinbekommen.

Jetzt habe ich nur das Problem das jedes mal wenn auf der Seite was geklickt das Plakat wieder geladen wird und ich es erst wegklicken muss.
Gibt es eine Möglichkeit wie das System merkt das ich das Plakat schonmal wegeklickt habe und dann nicht mehr lädt? Bestimmt mit Cookies oder?

wolf · 15. September 2014

Ein Cookie wäre eine gute Idee.
Allerdings solltest (musst) du deine User darauf hinweisen

Uwe Baake · 15. September 2014

Zitat von wolf

Ein Cookie wäre eine gute Idee.
Allerdings solltest (musst) du deine User darauf hinweisen

Gibt es noch andere Möglichkeiten?
Auf den Seiten wo ich das gesehen habe wurde ich auch nicht darauf hingewiesen.

wolf · 15. September 2014

Soll dieses Popup nicht mehr aufgehen während man auf EINER Seite klickt, oder nicht mehr, wenn man eine andere Seite besucht( auf deinem Server )?

Allgemein solltest du die box mit JS erst einblenden (und nicht von anfang an), da sonnst user, die JS deaktiviert haben ein klitzekleines Problem haben (Sie können das Plakat nicht wegklicken)

Wenn 1. -> Dann eine variable mit js setzen und vor dem einblenden überprüfen was drin steht.
Wenn 2. -> Cookie und dann gleiches Spielchen

Grüße, Wolf

Bild / Grafik bei Seitenaufruf öffnen

Jetzt mitmachen!

Teilen