Dialog tag

Overzicht

Sponsored by: Vacatures door Monsterboard

Jan R

Jan R

23/08/2021 11:37:23
Anchor link
Hoi

Ik heb ergens gelezen dat chrome de alert/prompt en ask zou blokeren in de toekomst.

Ik ben nu dus aan het experimenteren met de tag dialog.
Mijn bedoeling is vooral om bevestiging te hebben bij verwijderen van data.

In onderstaande belachelijke testcode
lukt het wel om de dialoog te tonen. Echter ik kan nog steeds scrollen. Kan ik dat beletten?

Jan

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>test dialog tag</title>
        <style>
            dialog {
                width: 50%;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <dialog id="dlg">
            <h2>Dialoog titel</h2>
            abcdefghijklmnopqrstuvwxyz<br>
            0123456789<br>
            ABCDEFGHIJKLMNOPQRSTUVWXYZ<br><br>
            <button onclick="document.getElementById('dlg').close();">Sluit</button>
        </dialog>
        <hr>
        <button onclick="document.getElementById('dlg').showModal();">Toon dialoog</button>
        <div>
            <?php
                $karakters
= 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                for($i=1;$i<=1000;$i++) {
                    $len = rand(2,10);
                    for($j=1;$j<$len;$j++) {
                        echo $karakters[rand(0,strlen($karakters)-1)];
                    }

                    echo ' ';
                }

            ?>

        </div>
        <a href="#">link</a>
    </body>
</html>
 
PHP hulp

PHP hulp

26/06/2022 13:51:16
 
- Ariën  -
Beheerder

- Ariën -

23/08/2021 11:43:09
Anchor link
Geen idee, want ik heb geen Safari. Verder hebben de andere browers geen ondersteuning.

Als ik op https://caniuse.com/?search=showmodal kijk, dan lijkt dit een verloren functie:
Quote:
This feature is deprecated/obsolete and should not be used.


En als ik dit bericht uit 2015(!) lees, dan is wel duidelijk dat de ondersteuning ooit gaat vervallen.

De dialog-tag daarintegen is wel nieuw, en zou wel steeds vaker ondersteund moeten worden vanaf Chrome 93. Ik heb het nog niet kunnen testen.
Gewijzigd op 23/08/2021 11:47:28 door - Ariën -
 
Jan R

Jan R

23/08/2021 11:52:05
Anchor link
- Ariën - op 23/08/2021 11:43:09:
Geen idee, want ik heb geen Safari. Verder hebben de andere browers geen ondersteuning.

Net omgekeerd. Enkel safari ondersteunt het niet. :)

- Ariën - op 23/08/2021 11:43:09:
Als ik op https://caniuse.com/?search=showmodal kijk, dan lijkt dit een verloren functie:
Quote:
This feature is deprecated/obsolete and should not be used.


Niet gezien This feature is deprecated/obsolete and should not be used. Zal dus maar stoppen met dialog. Ik was gelukkig maar aan het testen.

- Ariën - op 23/08/2021 11:43:09:
En als ik dit bericht uit 2015(!) lees, dan is wel duidelijk dat de ondersteuning ooit gaat vervallen.

De dialog-tag daarintegen is wel nieuw, en zou wel steeds vaker ondersteund moeten worden vanaf Chrome 93. Ik heb het nog niet kunnen testen.

Hoe raar! Dialog nieuw maar showmodal depricated. showmodal is net voor tag-dialog.

Bedankt
Jan



Toevoeging op 23/08/2021 11:57:39:

Als ik goed verder lees is het Window.showModalDialog dat deprecated is. Niet de tag dialog en dialog.showModal.
 
Ozzie PHP

Ozzie PHP

23/08/2021 14:12:31
 
Jan R

Jan R

24/08/2021 09:17:28
Anchor link
Bedankt Ozzie

Sorry maar bij mij kwam deze hit niet als eerste. Je kunt een paar standaard opties instellen in google:)
Echter nu ik dit werkende heb wil ik toch de uitleg geven voor anderen hoe ik het gedaan heb.

Maak een dialoog aan in je HTML
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
        <dialog id="dlg">
            <h2 id="dlgtitel">Dialoog titel</h2>
            <div id="dlgtekst">Dialoog tekst</div>
            <div id="dlgknoppen"></div>
        </dialog>


Maak ergens een code aan welke de dialoog toont.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<button onclick="openen('dlg','Hier titel', 'De vragen', ['knop 1', 'knop 2', 'knop 3', 'knop 4']);">showModal</button>


Open en sluit de dialog via code
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<script>
    function sluit(d, buttonTxt) {
        d.close();
        document.body.classList.remove("h");
        alert("Je koos voor: " + buttonTxt);
    }
    function openen(d, titel, tekst, knoppen) {
        document.body.classList.add("h");
        document.getElementById("dlgtitel").innerHTML = titel;
        document.getElementById("dlgtekst").innerHTML = tekst;
        divknop = document.getElementById("dlgknoppen")
        divknop.innerHTML = "";
        for(i=0;i<knoppen.length;i++) {
            let k = document.createElement("input");
            k.type="button";
            k.visible=true;
            k.value=knoppen[i];
            k.onclick = function() {
                //this=de knop; 1parent=div met alle knoppen; 2parent=de dialog
                sluit(this.parentElement.parentElement, this.value);
            }
            divknop.appendChild(k);
        }
        document.getElementById(d).showModal();
    }
</script>


Je hebt ook een beetje style nodig
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<style>
            dialog {
                width: 50%;
                margin: auto;
                position:fixed;
            }
            .h {
                overflow:hidden; /* verplicht */
            }
        </style>


Ik hoop om hier iemand mee van dienst te zijn. Onthou wel dat (nog) niet elke browser de dialog tag ondersteunt!

Jan
Gewijzigd op 24/08/2021 09:19:41 door Jan R
 
Ad Fundum

Ad Fundum

24/08/2021 20:45:59
Anchor link
Ik wist niet van het bestaan af.
MDN heeft ook een werkend voorbeeld, dat wel werkt op Edge, maar niet op Firefox zelf (en ook niet op Safari).
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Gezien het voorbeeld moet er veel JavaScript code bij, en de dialog ziet er ook niet echt mooi uit op Windows 10. Ik denk dat veruit de meeste mensen dat laatste beetje JavaScript en CSS maar zelf maken.
 
Adah Heidenreich

Adah Heidenreich

22/10/2021 13:20:09
Anchor link
<dialog open>This is an open dialog window</dialog>
 
- Ariën  -
Beheerder

- Ariën -

22/10/2021 13:28:29
Anchor link
Nuttige kick! :-/
 
 

Dit topic is gesloten.



Overzicht

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.