75 besökare, 2 medlemmar och 1 Student är online nu
Loopia

jQuery och Javascript

Modal Popup

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:

<!--Stäng-knapp övre höger hörn -->
<script type="text/javascript">
$(document).ready(function(){
$('.close').click(function() {
$('.modal-popup').hide();
$limit = 9999;
});
});
</script>

<!--Stäng-knapp i formulär -->

<script type="text/javascript">
$(document).ready(function(){
$('.button-close').click(function() {
$('.modal-popup').hide();
$limit = 9999;
});
});
</script>

<!--Stäng-knapp UTANFÖR formulär -->
<!--
<script type="text/javascript">
$(document).ready(function(){
$('.modal-popup').click(function() {
$('.modal-popup').hide();
$limit = 9999;
});
});
</script>
-->

Välj en animation

Det finns ett antal fördefinierade animationer du kan välja genom att kommentera den rad du inte vill använda och avkommentera rad du vill använda.

I exemplet nedan används <div class="animated fadeInDown">:

<!-- ANIMATION - VÄLJ GENOM ATT TA BORT KOMMENTERING -->
<div class="animated fadeInDown">
<!--<div class="animated fadeInLeft">-->
<!--<div class="animated flipInX">-->
<!--<div class="animated lightSpeedIn">-->
<!--<div class="animated rotateInUpRight">-->
<!--<div class="animated slideInDown">-->
<!--<div class="animated zoomInUp">-->
<!--<div class="animated jackInTheBox">-->
<!--<div class="animated bounce">-->
<!--<div class="animated flash">-->
<!--<div class="animated pulse">-->
<!--<div class="animated rubberBand">-->
<!--<div class="animated shake">-->
<!--<div class="animated swing">-->
<!--<div class="animated tada">-->
<!--<div class="animated wobble">-->
<!--<div class="animated jello">-->
<!--<div class="animated heartBeat">-->

Animeringarna använder Animate.css från Dan Eden.

Du hittar fler animeringar och exempel här https://daneden.github.io/animate.css/

Lägg till din egen text i sidhuvud, sidinnehåll och sidfot

Koden innehåller tre DIV där du kan ange din egen text; sidhuvud, sidinnehåll och sidfot:

<!-- SIDHUVUD -->
<div class="modal-heading"> Nyhetsbrev!
<div class="close">&times;</div>
</div>

<!-- 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 });

 

ZIP-filer med exemplen

 

Klicka på ikonen nedan för att hämta ZIP-filerna.

WDS medlem (WDS member)