Jag bloggar numera på http://blog.dileno.com ».

Prenumerera på RSS

Skapa modala popupfönster med jQuery och SimpleModal

Med modala popupfönster ges möjlighet att fokusera specifikt innehåll för användaren. Detta har gjort att modala popupfönster varit intressant i flera år och fortsätter att vara det.

Exempel SimpleModalMed hjälp av det utmärkta JavaScript-biblioteket jQuery och SimpleModal-pluginet kan man väldigt enkelt skapa sina egna modala popuper, i stället för att skriva egen kod.

Det enda som behövs är att ladda ner senaste versionen av jQuery och SimpleModal, inkludera JavaScript-filerna och sedan köra denna kod i en separat JavaScript-fil:

$(document).ready(function() {
$('a#modalpopup').click(function(e) {
e.preventDefault;
$('div#mypopup').modal({ position: ["15%", "25%"] });
});
});

Koden ovan kräver att du har följande HTML-kod:

<a href="#" id="modalpopup">Öppna popup</a>

<div id="mypopup">...</div>

<div id="simplemodal-overlay"></div>
<div id="simplemodal-container"></div>

De två sista div:arna är till för lagerhanteringen för det modala fönstret och bör egentligen skapas programmatiskt med JavaScript.

 

Till sidhuvudet

Clicky Web Analytics