PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Dialog tag

Door Jan R op 23-08-2021 11:37
2.275 views
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

<!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>
- Ariën -
23-08-2021 11:43 gewijzigd op 23-08-2021 11:47
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:

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.

Jan R
23-08-2021 11:52
- 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:

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



[size=xsmall]Toevoeging op 23/08/2021 11:57:39:[/size]

Als ik goed verder lees is het Window.showModalDialog dat deprecated is. Niet de tag dialog en dialog.showModal.
Jan R
24-08-2021 09:17 gewijzigd op 24-08-2021 09:19
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

        <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.
<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
<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; 1°parent=div met alle knoppen; 2°parent=de dialog
                sluit(this.parentElement.parentElement, this.value);
            }
            divknop.appendChild(k);
        }
        document.getElementById(d).showModal();
    }
</script>


Je hebt ook een beetje style nodig
<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
? Onbekende gebruiker
24-08-2021 20:45
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.
A Adah Heidenreich
22-10-2021 13:20
<dialog open>This is an open dialog window</dialog>
- Ariën -
22-10-2021 13:28
Nuttige kick! :-/

Reageren

Inloggen om te reageren