1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
<!DOCTYPE html>
<html>
<head>
<title>Interstitial test</title>
</head>
<body>
<style>
body {
position: relative;
}
#target.removed {
display: none;
}
#target.hidden {
visibility: hidden;
}
#target:hover {
background: yellow;
}
#interstitial {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border: 1px solid black;
background: rgba(255, 180, 180);
display: none;
}
#interstitial.visible {
display: block;
}
#close {
margin: 50px;
}
</style>
<div><button id="target">Click me</button></div>
<div id="aside">A place on the side to hover</div>
<div id="interstitial">
<div>This interstitial covers the button</div>
<button id="close">Close the interstitial</button>
</div>
<script>
const target = document.querySelector('#target');
const interstitial = document.querySelector('#interstitial');
const close = document.querySelector('#close');
target.addEventListener('click', () => {
window.clicked = (window.clicked ?? 0) + 1;
}, false);
close.addEventListener('click', () => {
const closeInterstitial = () => {
interstitial.classList.remove('visible');
target.classList.remove('hidden');
target.classList.remove('removed');
};
if (interstitial.classList.contains('timeout'))
setTimeout(closeInterstitial, 3000);
else
closeInterstitial();
});
let timesToShow = 0;
function setupAnnoyingInterstitial(event, times, capture) {
timesToShow = times;
const listener = () => {
timesToShow--;
interstitial.classList.add('visible');
interstitial.getBoundingClientRect();
if (!timesToShow && event !== 'none')
target.removeEventListener(event, listener, capture === 'capture');
};
if (event === 'hide' || event === 'timeout') {
target.classList.add('hidden');
listener();
if (event === 'timeout')
interstitial.classList.add('timeout');
} else if (event === 'remove') {
target.classList.add('removed');
listener();
} else if (event === 'none') {
listener();
} else {
target.addEventListener(event, listener, capture === 'capture');
}
}
</script>
</body>
</html>
|
