Tomdrummer
Gebruiker
- Lid geworden
- 9 apr 2013
- Berichten
- 24
"Dé grootste en gratis computerhelpdesk van Nederland"
HTML pop up
- Onderwerp starter Tomdrummer
- Startdatum
- Status
Dat is wel te doen met een alert box in Javascript.
Kijk hier maar eens naar: http://www.w3schools.com/js/js_popup.asp.
Kijk hier maar eens naar: http://www.w3schools.com/js/js_popup.asp.
- Lid geworden
- 13 aug 2013
- Berichten
- 5.384
Zoek eens op: jquery popup overlay
Bijvoorbeeld http://dev.vast.com/jquery-popup-overlay/
Bijvoorbeeld http://dev.vast.com/jquery-popup-overlay/
Tomdrummer
Gebruiker
- Lid geworden
- 9 apr 2013
- Berichten
- 24
@Bron, hoe kan ik deze automatisch laten opengaan.
Bedankt voor jullie antwoord.
Ik heb deze code gebruikt:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site Title</title>
</head>
<body>
<!-- Add an optional button to open the popup -->
<button class="my_popup_open">Open popup</button>
<!-- Add content to the popup -->
<div id="my_popup">
...popup content...
<!-- Add an optional button to close the popup -->
<button class="my_popup_close">Close</button>
</div>
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<!-- Include jQuery Popup Overlay -->
<script src="http://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>
<script>
$(document).ready(function() {
// Initialize the plugin
$('#my_popup').popup();
});
</script>
</body>
</html>
Bedankt voor jullie antwoord.
Ik heb deze code gebruikt:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site Title</title>
</head>
<body>
<!-- Add an optional button to open the popup -->
<button class="my_popup_open">Open popup</button>
<!-- Add content to the popup -->
<div id="my_popup">
...popup content...
<!-- Add an optional button to close the popup -->
<button class="my_popup_close">Close</button>
</div>
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<!-- Include jQuery Popup Overlay -->
<script src="http://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>
<script>
$(document).ready(function() {
// Initialize the plugin
$('#my_popup').popup();
});
</script>
</body>
</html>
Laatst bewerkt:
- Lid geworden
- 13 aug 2013
- Berichten
- 5.384
Een voorbeeld van een popup met deze jQuery plugin. Je kunt met opties naar eigen wens dingen aanpassen (zie website voor de opties). Ik heb er wat simpele style bij gedaan als voorbeeld. De (x) knop kan je weghalen want de Esc-toets werkt ook om de popup te sluiten.
Suc6 en have fun.
*** aanvulling
In de voorbeelden op de website zie je telkens $(.........).popup({
Verander de stippeltjes in '.popup1' dan werkt het in bovenstaande code.
Code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Voorbeeld popup</title>
<style>
.popup1 {
position: relative; /* want popup1close is absolute */
max-width: 150px;
padding: 8px;
border: 1px solid #888;
border-radius: 5px;
font: normal 14px verdana, sans-serif;
color: #555;
line-height: 1.4;
background-color: #fff;
}
.popup1close {
position: absolute;
top: -10px;
right: -10px;
width: 16px; /* breedte is gelijk aan hoogte */
height: 16px;
background-color: #fff;
border: 1px solid #555;
border-radius: 8px; /* helft van breedte of hoogte */
text-align: center;
color: #555;
line-height: 1;
cursor: pointer;
}
</style>
</head>
<body>
<div class="popup1">
Tekst in de popup. En nog wat tekst in de popup.
<div class="popup1close">X</div>
</div>
<!-- jQuery & jQuery popup overlay plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>
<!-- popup initialize & options -->
<script>
$(document).ready(function() {
$('.popup1').popup({
autoopen: true,
opacity: 0.25,
closeelement: '.popup1close',
scrolllock: true //achter de laatste optie geen komma
});
});
</script>
</body>
</html>*** aanvulling
In de voorbeelden op de website zie je telkens $(.........).popup({
Verander de stippeltjes in '.popup1' dan werkt het in bovenstaande code.
Laatst bewerkt:
- Status
