code/dialog.html at main · rafaelqg/code · 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
<html>
    <head>
        <script>
            let dialog = null;

            function openAuthenticationDialog(){
                document.getElementById('dialog_1').showModal();
            }

            function closeAuthenticationDialog(){
                document.getElementById('dialog_1').close();
                showProcessingDialog();
            }

            function showProcessingDialog(){
            	dialog = document.createElement("dialog");
                document.body.appendChild(dialog);
                dialog.innerHTML =  "Your data is being processed, it will be closed automatically";
                dialog.style.backgroundColor = "#0A0";
                dialog.showModal();
                setTimeout(function(){dialog.close()}, 3500);
            }
        </script>
    </head>
	<body>
            <h1>Do you know HTML DIALOG tag?</h1>
            <button onclick="openAuthenticationDialog()">Open modal - Login popup</button>

            <dialog id="dialog_1">
                <form>
                    <input type="text" placeholder="login" />
                    <input type="text" placeholder="password" />
                    <input type="button" onclick="closeAuthenticationDialog()" value = "Authenticate" />
                </form>
            </dialog>
	<body>
<html>