-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
59 lines (53 loc) · 2.72 KB
/
demo.html
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
<!DOCTYPE html>
<html>
<head>
<title>showModalDialogMulti polyfill demo</title>
<meta charset="utf-8" />
<script src="showModalDialogMulti.js"></script>
</head>
<body>
<h1>showModalDialogMulti polyfill demo</h1>
<p>This doesn't use strict mode and is supported in all major browsers including Internet Explorer. But it uses Function.caller property which already is deprecated in FireFox and probably soon will be removed from other browsers too.</p>
<form action="">
<p><input id="x" placeholder="Input number" /></p>
<p><input id="button1" type="button" value="Show Modal Dialog using yield" /> <span id="result1"></span></p>
<p><input id="button2" type="button" value="Show Modal Dialog using async/await" /> <span id="result2"></span></p>
<p><input id="button3" type="button" value="Show Modal Dialog using eval" /> <span id="result3"></span></p>
<p><input id="bt_close" type="button" value="Close dialog" /></p>
</form>
<hr />
<p>Dialog received arguments: <b><span id="arg"></span></b></p>
<script>
x = document.getElementById('arg').innerHTML = window.dialogArguments;
if (x) {
window.returnValue = parseFloat(x) * parseFloat(x); // calc x^2 and return result
}
</script>
<script>
//using yield
document.getElementById('button1').addEventListener('click', function() {
spawn(function*() {
var opt = "dialogWidth:800px;dialogHeight:380px";
var ret = yield window.showModalDialog("demo.html", document.getElementById("x").value, opt);
document.getElementById('result1').innerHTML = "Returned from modal: <b>" + ret + "</b>";
});
});
//using async/await
document.getElementById('button2').addEventListener('click', async function() {
var opt = "dialogWidth:800px;dialogHeight:380px";
var ret = await window.showModalDialog("demo.html", document.getElementById("x").value, opt);
document.getElementById('result2').innerHTML = "Returned from modal: <b>" + ret + "</b>";
});
//using eval
document.getElementById('button3').addEventListener('click', function() {
var opt = "dialogWidth:800px;dialogHeight:380px";
var ret = window.showModalDialog("demo.html", document.getElementById("x").value, opt);
document.getElementById('result3').innerHTML = "Returned from modal: <b>" + ret + "</b>";
});
// close most recent dialog
document.getElementById('bt_close').addEventListener('click', function() {
window.close();
});
</script>
</body>
</html>