In deze les leer je:
✅ Hoe je een modal maakt (pop-upvenster)
✅ Hoe je tabbladen maakt om content te organiseren
✅ Hoe je overgangen en animaties toevoegt voor een soepele gebruikerservaring
📋 Wat gaan we bouwen?
We gaan een eenvoudige pagina maken met:
- Een modal (pop-upvenster): Wanneer je op een knop klikt, verschijnt er een pop-upvenster.
- Tabbladen: Hierdoor kun je verschillende content tonen zonder de pagina opnieuw te laden. Elke tab toont andere informatie.
We zullen ook zorgen dat de overgang tussen deze elementen vlot en soepel is met behulp van jQuery-animaties.
✅ 1. HTML-structuur
<!DOCTYPE html>
<html>
<head>
<title>Interactiviteit met jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* Modal styling */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
padding-top: 60px;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Tab styling */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.tabs button {
padding: 10px;
margin-right: 5px;
cursor: pointer;
}
.tabs button.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>Modal en Tabbladen met jQuery</h2>
<!-- Modal trigger button -->
<button id="openModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Dit is een modal! Klik buiten de modal of op het kruis om te sluiten.</p>
</div>
</div>
<!-- Tabbladen -->
<div class="tabs">
<button class="tab-button active" data-tab="1">Tab 1</button>
<button class="tab-button" data-tab="2">Tab 2</button>
<button class="tab-button" data-tab="3">Tab 3</button>
</div>
<div id="tab1" class="tab-content active">
<h3>Inhoud van Tab 1</h3>
<p>Dit is de inhoud van het eerste tabblad.</p>
</div>
<div id="tab2" class="tab-content">
<h3>Inhoud van Tab 2</h3>
<p>Dit is de inhoud van het tweede tabblad.</p>
</div>
<div id="tab3" class="tab-content">
<h3>Inhoud van Tab 3</h3>
<p>Dit is de inhoud van het derde tabblad.</p>
</div>
<script>
// jQuery-code komt hier onder
</script>
</body>
</html>
✅ 2. jQuery-code toevoegen
Modal (Pop-upvenster)
Een modal is een pop-up die de gebruiker vraagt om een actie te ondernemen (bijvoorbeeld sluiten). Wanneer de gebruiker op de “Open Modal” knop klikt, willen we de modal zichtbaar maken. En wanneer de gebruiker op het kruisje of buiten de modal klikt, willen we de modal weer verbergen.
$(document).ready(function() {
// Modal openen
$('#openModal').click(function() {
$('#myModal').fadeIn();
});
// Modal sluiten
$('.close').click(function() {
$('#myModal').fadeOut();
});
// Sluiten als je buiten de modal klikt
$(window).click(function(event) {
if ($(event.target).is('#myModal')) {
$('#myModal').fadeOut();
}
});
});
Wat doet dit?
$('#openModal').click(...)
: Wanneer de gebruiker op de knop “Open Modal” klikt, wordt de modal zichtbaar door de.fadeIn()
animatie.$('.close').click(...)
: Wanneer de gebruiker op het kruisje klikt, wordt de modal weer verborgen door.fadeOut()
.$(window).click(...)
: Als de gebruiker buiten de modal klikt, wordt de modal ook gesloten.
Tabbladen
Nu gaan we de tabbladen implementeren. Elk tabblad toont een ander stuk inhoud. Wanneer de gebruiker op een tabblad klikt, wordt de overeenkomstige inhoud getoond.
$(document).ready(function() {
// Tabbladen wisselen
$('.tab-button').click(function() {
var tabNummer = $(this).data('tab'); // Het tabbladnummer
// De tabbladen en de inhoud verbergen
$('.tab-button').removeClass('active');
$('.tab-content').removeClass('active');
// Het aangeklikte tabblad markeren en de inhoud tonen
$(this).addClass('active');
$('#tab' + tabNummer).addClass('active');
});
});
Wat doet dit?
$('.tab-button').click(...)
: Wanneer een tabblad wordt aangeklikt, wordt het nummer van het tabblad opgeslagen in de variabeletabNummer
met behulp van.data('tab')
.- Verberg alle tabbladen en inhoud: We verwijderen de
active
class van alle tabbladen en de inhoud om ervoor te zorgen dat alleen het geselecteerde tabblad zichtbaar is. - Show het geselecteerde tabblad en de bijbehorende inhoud: We voegen de
active
class toe aan het geselecteerde tabblad en de bijbehorende inhoud.
✨ Wat leer je van deze les?
- Modals: Hoe je een modaal pop-upvenster maakt met een animatie (fadeIn/fadeOut).
- Tabbladen: Hoe je dynamisch tussen verschillende inhoud kunt schakelen met behulp van tabbladen.
- Animaties: Hoe je overgangseffecten toevoegt, zoals fade-animaties, om de gebruikerservaring te verbeteren.
- Interactiviteit verbeteren: Hoe je de interactie met de gebruiker verhoogt door inhoud zichtbaar te maken zonder de pagina te vernieuwen.