Back to frontpage
Hét vraag- en antwoordplatform van Nederland

Hoe schrijf ik file die veel pop-ups op het scherm laat komen?

Ik meen me te herinneren dat we op school (15jaar geleden) eens een bestandje moesten "schrijven", die bij het openen ervan, een hele boel popups tevoorschijn kwamen.

Zou iemand weten hoe je dit doet?

taillie
2 jaar geleden
759
TurfGraver
2 jaar geleden
Loop. Maar wij leerden dit juist te voorkomen. ;)
BonBonvanJohn
2 jaar geleden
Bedoel je misschien die irritante meldingen die oneindig kunnen doorgaan. Hieronder een voorbeeld met 5 meldingen. Plaats onderstaand script in de head van je html:
<script>
function showAlert() {
alert ("Hallo"); alert ("Ik ben irritant!"); alert ("Ik ga maar door"); alert ("en door!"); alert ("en door!");
}
</script> Schrijf vervolgens de eerste bodytag zo: <body onload="showAlert()">

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Antwoorden (1)

Zoiets:

<div class="popup" onclick="myFunction()">Click me!
<span class="popuptext" id="myPopup">Popup text...</span>
</div>

<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>



* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}

Herhaal dit voor meer popups. Het lijkt me geen lolletje als een gebruiker hiermee geconfronteerd wordt…
(Lees meer...)
Bronnen:
SimonV
2 jaar geleden

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 5000
Gekozen afbeelding
+