Dialog tag
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)
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
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>
<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>
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 -
- 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.
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.
https://stackoverflow.com/questions/10707608/how-to-disable-page-scroll-when-opening-dialog-box
https://usefulangle.com/post/279/hide-page-scrollbar-when-fixed-modal-opened
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)
1
2
3
4
5
2
3
4
5
<dialog id="dlg">
<h2 id="dlgtitel">Dialoog titel</h2>
<div id="dlgtekst">Dialoog tekst</div>
<div id="dlgknoppen"></div>
</dialog>
<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)
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)
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
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>
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)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<style>
dialog {
width: 50%;
margin: auto;
position:fixed;
}
.h {
overflow:hidden; /* verplicht */
}
</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
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.
Dit topic is gesloten.