dialog/index.html at master · ShoobyD/dialog · GitHub

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
<!DOCTYPE html>
<html>

	<head>

		<meta charset="utf-8">
		<title>Simple Dialog Box</title>
		<meta name="viewport" content="width=device-width,initial-scale=1" />

		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="dialog.css" />
		<script src="dialog.js"></script>

	</head>

	<body>

		<div id="wrapper">
			<header>
				<h1>Dialog</h1>
			</header>

			<p>
				A simple dialog box.
			</p>
			<div>
				<button id="openDialog">Open Dialog</button>
			</div>
		</div>
		<script>

			const dialog        = new Dialog();
			const openDialogBtn = document.querySelector( '#openDialog' );
			openDialogBtn.addEventListener( 'click', openDialog );

			openDialog();

			function openDialog() {
				dialog.showModal( [
					`<h2>Howdy Doody!</h2>`,
					`<div>IMMA DIALOGUEUE!</div>`,
				] );
			}

			dialog.addEventListener( 'cancel', ( e ) => {
				console.log( 'canceled', e );
			} );

		</script>

	</body>

</html>