html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>Alerts R us</title>
</head>
<body>
<h1 class="title">Random Text</h1>
<article class="left-article right-article">
<p>With so much random background text in the world, why is this one special?</p><br />
<p>Well, with more dullness than ever, the only thing I <b>do</b> want you to look at is my special alerting system.</p><br />
<p>Click at the button to activate the alert.</p><br />
<button onclick="navigator.vibrate(50);say('Oh no!', 'My alerting system worked.\nThat is much worse than the fact that I just broke your system, of course.')">Self destruct</button>
</article>
<div id="alert-container" class="no-display">
<div id="alert">
<h2 class="title" id="alert-title"></h2>
<p class="left-article right-article" id="alert-content"></p>
<button id="alert-button" onclick="navigator.vibrate(50);closeAlert()">Ok</button>
</div>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
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
/* alert box code */
#alert-container {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.5);
}
#alert {
background-color: white;
width: 80%;
position: absolute;
left: 10%;
top: 5%;
min-height: 40vh;
height: auto;
padding-bottom: 10%;
word-wrap: pre;
}
.no-display {
display: none;
}
/* the rest */
#alert-button {
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function say(title, message) {
document.getElementById("alert-content").innerHTML = message;
document.getElementById("alert-title").innerHTML = title;
document.getElementById("alert-container").className = "";
}
function closeAlert() {
document.getElementById("alert-container").className = "no-display";
}
window.addEventListener("load", function() {
document.getElementById("alert-container").addEventListener("click", function(e) {
if (e.target == this) {
closeAlert();
}
})
})
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run