Skapa modala popupfönster med jQuery och SimpleModal

• 2009-06-09
• 0 kommentarer
• JavaScript

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.

Med 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.

• Läs mer om och ladda ner SimpleModal
• Ladda ner jQuery

 

Kommentar: *

Namn: *

E-post: *

Hemsida:

Fyll i siffran sju här:

Mitt twitter-konto