Popup layer med CSS och JavaScript

I guiden kommer vi använda oss av CSS och HTML för att skapa ett layer och sedan JavaScript för att dölja det vid stängning.

Skapa layer i CSS.

Vi börjar med att skapa en HTML-div.
Positionering görs med position:absolut, padding sätts till 5 pixlar och vi ger vårt layer
z-index 5.

<div id="popad" style="padding:5px;position: absolute; left: 50%; top: 50%; 
margin-left:-180px; margin-top:-180px; z-index 5; height: 360px; width: 360px; 
background: white; border:1px black dotted ">
Innehåll skall läggas in här
</div>

Nu har vi ett layer som lägger sig över allt som tilldelats lägre eller inget z-index.
Vi lägger till följande innehåll i vår div där det är markerat i ovan kod.

<div style="background:#eeeeee;padding-bottom:13px;">
<a href="javascript:closeAd()" style="width:100%;float:right;">Stäng(x)</a>
<b>Rubrik på popup layer!</b>
</div>
<p>
Här följer texten.<br/>
Vi har nu skapat en popup med CSS och HTML som garanterat INTE blockeras!<br/>
Ibland har man viktig information och då är det väldigt smidigt att kunna lägga
ett layer som detta, för att vara säker på att få besökarnas uppmärksamhet.
</div>

Vi placerade länken "stäng" längst till höger genom att använda oss av CSS attributen float:right.
Top 50% placerar divens övre kant på 50% av skärmens höjd och left 50% placerar vänstra kanten på mitten av skärmen i horizontellt led. Margin-left och margin-top flyttar sedan diven med avseende på höjd och bredd så dess mittpunkt placeras i mitten av skärmen.

Dölja layer med JavaScript.

Som du ser i vårt layer anropar länken "stäng" funktionen closeAd(), denna skall vi nu konstruera.
För att identifiera vår div använder vi oss av dess ID som vi satte till popad och för att göra den osynlig ger vi den CSS-atributen display:none.

<script type="text/javascript">
function closeAd() {
document.getElementById("popad").style.display="none"; 
}
</script>

Sådär, nu är vårt css popup lager klart, för att testa det kan du klicka här.

---

Kommentarer    Antal 0    Medelpoäng 0/10

Bli medlem för att kunna skriva kommentarer!
Logga in om du redan är medlem.