En "modal popup" är ett fönster som visas ovanför innehållet i en webbsida. Popup-fönstrets funktion är att inaktivera sidans övriga innehåll tills användaren har interagerat med innehållet i popup-fönstret.
Popup-fönstret visas ovanför och har ett område som "tonar" ned sidan innehåll för att fokus ska ligga på den information som visas i popup-fönstret.
En modal popup kan innehålla information, erbjudanden, formulär för anmälan, nyhetsbrev osv.
Uppdatera webbläsaren med F5 för att se popup igen.
Filer som används till Modal Popup
Det är fyra filer som används och du hittar dem i ZIP-filen ned i denna sida:
popupwindow.php
style.css
script.js
jquery.cookie.js
Placera gärna filerna i samma mapp som den sida popup-fönstret ska visas ovanför.
Lägg till koden i den sida som ska visa popup-fönstret
I den sida som ska visa popup-fönstret ska koden nedan läggas till:
<body>
<!-- NYHETSBREV POPUP start -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="script.js"></script> <!-- DIV kopplad till script.js -->
<div class="modal-popup"></div> <!-- NYHETSBREV POPUP slut -->
Övrigt innehållet i din sida här...
</body>
popupwindow.php
Filen popupwindow.php är innehållet i popup-fönstret och du ändrar till dina egna texter här men här finns även konfigurerig av stängning och animation.
Tre metoder för att stänga popupfönstret
Innehållet i sidan kan inte användas förrän popup-fönstret är stängt. Popup-fönstret kan stängas med krysset i högra hörnet (close), knappen i sidfoten (button-close) men du kan välja en tredje metod; att klicka utanför popup-fönstret.
Om du vill koppla på den tredje metoden att stänga genom att klicka utanför popup-fönstret så tar du bort de rödmarkerade kommentarstecknen <!-- --> nedan:
<!-- SIDINNEHÅLL --> <div class="modal-main">
<div class="infotext"> Anmäl dig till vårt nyhetsbrev så får du information om vad som är på gång hos oss. Vi skickar max 1 nyhetsbrev per månad och du kan när du vill avsluta prenumerationen. </div>
e-postadress:<br>
<input type="text" name="email" id="popup_email" class="email" />
</div>
<!-- SIDFOT --> <div class="modal-footer">
<input type="submit" name="submit" value="Jag vill ha nyhetsbrev!" class="button-ok" />
<input type="button" value="Stäng" class="button-close"/>
</div>
OBS! Ändra inte namnen på DIV. De används både i i filen style.css och script.js och måste då även ändras där.
style.css
CSS-filen som formaterar innehållet i popup-fönstret är "style.css" och avsnitten är kommenterade så att du enklare hittar rätt element att formatera.
Öppna CSS-filen och ange egna formateringar vid behov.
script.js
Filen "script.js" innehåller jQuery som anger hur popup-fönstret ska fungera.
OBS! Här måste du ändra antal dagar innan popup-fönstret visas igen.
Fördröjning innan popup-fönstret visas
Ändra variablen $limit och ange ett värde. Exemplet nedan visar popup utan fördröjning:
// Tid innan popup visas (500 = 5 sekund)
$limit = 0;
Antal dagar innan popup-fönstret visas igen
När sidan visas första gången så lagras en cookie. När användaren besöker sidan igen kontrollerar cookien om sidan visats i webbläsaren tidigare (det är filen jquery.cookie.js som sköter cookie-hanteringen och du ska inte göra några ändringar i den filen).
När du installerar och testar Modul popup så används standardvärdet 0 för att popup-fönstret ska visas varje gång. När du är klar med konfigureringen kan du ange antal dagar innan popup-fönstret visas för användaren igen.
I exemplet nedan visas popup-fönstret igen för besökaren om 5 dagar:
// Tid i dagar innan popup visas igen (ange värdet 0 när du testar funktionen)
$.cookie('modalpopup_status', '1', { expires: 5 });
Logga in
skriv ut »