HTML dialog element demonstration session

Demonstration of HTML dialog element.

Slides with link to demo code.

1. Let’s dialog Ran Wahle

2. About Me Ran Wahle Full Stack developer at Tikal

3. A little story

4. Dialog without dialog Dialog content Container that hides everything else

5. HTML < div id = "my-dialog-container" > < div id = "my-dialog" > < p > Hello dialog </ p > < button type = "button" > Close </ button > </ div > </ div > < button id = "open-dialog" > Open dialog </ button >

6. CSS #my-dialog { display : none ; position : fixed ; padding : 1rem ; top : 50% ; left : 50% ; background-color : white ; border-style : dashed ; &[open] { display : block ; } } :has ( #my-dialog [ open ]) { background-color : black ; position : fixed ; top : ; right : ; width : 100% ; height : 300vh ; z-index : 1000 ; overflow-y : hidden ; }

7. javascript document . querySelector ( '#open-dialog' ). addEventListener ( 'click' , () => { const dialog = document . querySelector ( '#my-dialog' ); dialog . setAttribute ( 'open' , true ); dialog . querySelector ( 'button' ). addEventListener ( 'click' , () => { dialog . removeAttribute ( 'open' ); }); });

8. Old school dialog Demo

9. Dialog element < dialog > < form method = "dialog" > < p > Hello dialog </ p > < button type = "submit" > Close </ button > </ dialog >

10. Open attribute < dialog open > < form method = "dialog" > < p > Hello dialog </ p > < button type = "submit" > Close </ button > </form> </ dialog >

11. Demo Open attribute

12. Main method showModal close

13. Events close

14. Demo showModal

15. Return value document . querySelector ( 'button#cancel' ). addEventListener ( 'click' , () => { dialog . returnValue = "Cancel" dialog . close (); }); dialog . addEventListener ( 'close' , () => { document . querySelector ( 'output' ). textContent = dialog . returnValue ; });

16. Demo Return value

17. Let’s wrap We have seen the new dialog element, got familiar with its properties and methods. UI-wize there is no big difference between dialog and a div with some CSS games, but we have some functionality of method and events that supports us as programmers

18. My code repo https://github.com/ranwahle/dialog-demo

19. Thank you! Ran Wahle [email protected] [email protected] @ranwahle