dialog要素でつくるモーダルダイアログ

Transcript

1. EJBMPHཁૉͰͭ͘Δ
   ϞʔμϧμΠΞϩά
   $PEFST)JHI 1BSU
   
   
   খࢁాߊߒ
   

   View Slide

2. w ը໘ͷ࠷લ໘ʹදࣔ͞ΕΔϘοΫε
   w ϘοΫε಺ʹίϯςϯπ͕ల։͞ΕΔ
   w ด͡ΔϘλϯ͕͍͍ͭͯΔ
   w എ໘ʹΦʔόʔϨΠ͕͋Δ
   ϞʔμϧμΠΞϩάͱ͸
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. w ͍ͭ΋ಉ͡+4ϥΠϒϥϦΛ࢖ͬͯ͠·͏
   

   ʢΧελϚΠζͮ͠Β͍ʣ
   w Ϟʔμϧͷ[JOEFY͸͍ͭ͘ʹ͢Δʁ
   w λϒΩʔΛԡ͢ͱϞʔμϧ֎ʹҠಈͯ͠͠·͏
   w 3FBDUͷDSFBUF1PSUBM
   ΍
   

   7VFͷ5FMFQPSU͕ඞཁ
   Ϟʔμϧͷ͓೰Έ
   

   View Slide

9. View Slide

10. EJBMPHͰղܾͰ͖·͢ʂ
    

    View Slide

11. גࣜձࣾϐΫηϧάϦου
    খࢁాߊߒ
    @yomotsu
    

    View Slide

12. Ϟʔμϧ༻ͷཁૉEJBMPH
    ॏͳΓͷ࢓૊Έ
    $44ͰΧελϚΠζ
    EJBMPHͷऑ఺
    ͓඼ॻ͖
    

    View Slide

13. Ϟʔμϧ༻ͷཁૉ
    

    EJBMPH
    

    View Slide

14. w ೥ɺچ࢓༷ͷEJBMPH͕࡟আ
    w ೥ɺ)5.--JWJOH4UBOEBSEʹ
    

    ݱ࢓༷Ͱ௥Ճ
    w ೥ɺ$ISPNJVNͰαϙʔτ
    w ೥ɺ)5.-ͱͯ͠8$࢓༷ʹ௥Ճ
    EJBMPH
    

    View Slide

15. https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element
    
    
    

    View Slide

16. 
    
    
    
    
    
    簡易モーダル
    
    
    
    

    View Slide

17. 
    
    
    
    
    
    簡易モーダル
    
    
    
    
    
    

    
    
    
    
    
    type="button"
    
    
    onclick="document.querySelector('#my-modal').showModal();"
    
    
    >
    
    
    開く
    
    
    
    

    View Slide

18. 
    
    
    
    
    
    簡易モーダル
    
    
    
    
    
    

    
    
    
    
    
    type="button"
    
    
    onclick="document.querySelector('#my-modal').showModal();"
    
    
    >
    
    
    開く
    
    
    
    

    View Slide

19. 
    
    
    
    
    
    簡易モーダル
    
    
    
    
    
    

    
    
    
    
    
    type="button"
    
    
    onclick="document.querySelector('#my-modal').showModal();"
    
    
    >
    
    
    開く
    
    
    
    

    View Slide

20. 
    
    
    
    
    
    簡易モーダル
    
    
    
    
    type="button"
    
    
    onclick="document.querySelector( '#my-modal' ).close();"
    
    
    >
    
    
    閉じる
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    type="button"
    
    
    onclick="document.querySelector('#my-modal').showModal();"
    
    
    >
    
    
    開く
    
    
    
    

    View Slide

21. View Slide

22. w ɹ$ISPNF
    

    ɹ4BGBSJ
    

    ɹ'JSFGPY
    

    ͰαϙʔτࡁΈ
    w ඇαϙʔτϒϥ΢β޲͚
    

    ϙϦϑΟϧ͕͋Δ
    EJBMPH
    

    View Slide

23. https://github.com/GoogleChrome/dialog-poly
    fi
    ll
    

    View Slide

24. ॏͳΓͷ࢓૊Έ
    

    View Slide

25. w [JOEFY͸਺஋Ͱࢦఆ͢Δ
    w ߴ͍஋͕લ໘ʹදࣔ
    w ਌ͷॏͳΓ͕༏ઌ
    

    ʢελοΩϯάίϯςΩετʣ
    [JOEFYͷ͓͞Β͍
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. w ࠷લ໘ʹදࣔ͢ΔͨΊͷ஋͸͍ͭ͘ʁ
    w ೖΕࢠʹͳΔͱ
    

    ࠷લ໘ʹදࣔͰ͖ͳ͍
    [JOEFYͷ͓೰Έ
    

    View Slide

32. w EJBMPHʹద༻͞ΕΔ
    

    ॏͳΓϨΠϠʔ
    w ඞͣ࠷લ໘ʹදࣔ͞ΕΔ
    w $44 [JOEFYͳͲ
    Ͱ͸௒͑ΒΕͳ͍
    τοϓϨΠϠʔ
    

    View Slide

33. https://fullscreen.spec.whatwg.org/#top-layer
    

    View Slide

34. View Slide

35. View Slide

36. EJBMPH͸
    

    ࠷લ໘͕อূ͞Ε͍ͯΔ
    

    ελοΩϯάίϯςΩετͷೖΕࢠ΋ಥഁ
    
    

    View Slide

37. $44ͰΧελϚΠζ
    

    View Slide

38. w EJBMPHʹ͸ϒϥ΢β$44͕ޮ͍͍ͯΔɻ
    

    $44͸্ॻ͖Մೳ
    w എܠ෦෼͸
    

    CBDLESPQηϨΫλͰ੍ޚͰ͖Δ
    

    ϙϦϑΟϧར༻࣌͸CBDLESPQ
    
    $44ͰΧελϚΠζ
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. EJBMPHͷऑ఺
    

    എܠΫϦοΫͰด͍ͨ͡
    

    View Slide

44. View Slide

45. EJBMPHΛΫϦοΫͨ͠ͱ͖
    

    ΫϦοΫ஍఺͕ɺຊମΑΓ֎ͳΒ
    

    ด͡Δ
    

    View Slide

46. View Slide

47. const $modal = document.querySelector( '#my-modal' );
    
    
    $modal.removeEventListener( 'click', onDialogClick );
    
    
    function onDialogClick( event ) {
    
    
    const elRect = $modal.getBoundingClientRect();
    
    
    const isInDialog =
    
    
    elRect.top <= event.clientY && event.clientY <= elRect.bottom &&
    
    
    elRect.left <= event.clientX && event.clientX <= elRect.right;
    
    
    // もし、内側をクリックしていたら、なにもしない
    
    
    if ( isInDialog ) return;
    
    
    // それ以外（外側をクリック）なら閉じる
    
    
    $modal.close();
    
    
    }
    

    View Slide

48. const $modal = document.querySelector( '#my-modal' );
    
    
    $modal.removeEventListener( 'click', onDialogClick );
    
    
    function onDialogClick( event ) {
    
    
    const elRect = $modal.getBoundingClientRect();
    
    
    const isInDialog =
    
    
    elRect.top <= event.clientY && event.clientY <= elRect.bottom &&
    
    
    elRect.left <= event.clientX && event.clientX <= elRect.right;
    
    
    // もし、内側をクリックしていたら、なにもしない
    
    
    if ( isInDialog ) return;
    
    
    // それ以外（外側をクリック）なら閉じる
    
    
    $modal.close();
    
    
    }
    

    View Slide

49. EJBMPHͷऑ఺
    

    ΞχϝʔγϣϯͰด͍ͨ͡
    

    View Slide

50. w ։͘ࡍʹɺ
    

    $44"OJNBUJPOTΛద༻͢Δ
    w ։͘௚ޙɺด͡Δ௚લʹ
    

    DMBTTΛมߋͯ͠
    

    $445SBOTJUJPOΛద༻͢Δ
    Ξχϝʔγϣϯ
    

    View Slide

51. @keyframes fadeIn {
    
    
    0% {
    
    
    opacity: 0;
    
    
    }
    
    
    100% {
    
    
    opacity: 1;
    
    
    }
    
    
    }
    
    
    

    View Slide

52. .myModal[open] {
    
    
    animation: fadeIn 1s 1;
    
    
    }
    
    
    .myModal[open]::backdrop {
    
    
    animation: fadeIn 1s 1;
    
    
    }
    
    
    EJBMPH͕։͘ͱ
    PQFOଐੑ͕෇͘
    

    View Slide

53. View Slide

54. .myModal:modal {
    
    
    animation: fadeIn 1s 1;
    
    
    }
    
    
    .myModal:modal::backdrop {
    
    
    animation: fadeIn 1s 1;
    
    
    }
    
    
    NPEBMٖࣅΫϥε͸
    

    ϙϦϑΟϧͰ͖ͳ͍
    

    View Slide

55. w ։͘ࡍʹɺ
    

    $44"OJNBUJPOTΛద༻͢Δ
    w ։͘௚ޙɺด͡Δ௚લʹ
    

    DMBTTΛมߋͯ͠
    

    $445SBOTJUJPOΛద༻͢Δ
    Ξχϝʔγϣϯ
    

    View Slide

56. dialog.myModal {
    opacity: 0;
    transform: scale( .9 );
    transition: opacity .5s, transform .5s;
    }
    dialog.myModal.-opening {
    opacity: 1;
    transform: scale( 1 );
    }
    

    View Slide

57. const showModal = ( id ) => {
    const $modal = document.getElementById( id );
    $modal.showModal();
    requestAnimationFrame( () => $modal.classList.add( '-opening' ) );
    }
    ϑϨʔϜ଴͔ͬͯΒ
    

    ΫϥεΛ෇༩͢Δ
    

    View Slide

58. const closeModal = ( id ) => {
    const $modal = document.getElementById( id );
    $modal.classList.remove( '-opening' );
    $modal.addEventListener( 'transitionend', $modal.close, { once: true } );
    }
    Ξχϝʔγϣϯ׬ྃΛ଴ͬͯ
    

    DMPTF͢Δ
    

    View Slide

59. View Slide

60. EJBMPHͷऑ఺
    

    εΫϩʔϧΛࢭΊ͍ͨ
    

    View Slide

61. View Slide

62. 
    

    View Slide

63. const showModal = ( id ) => {
    const $modal = document.getElementById( id );
    $modal.showModal();
    noScroll.on(); // ϖʔδຊମͷεΫϩʔϧΛ཈ࢭ͢Δ
    $modal.addEventListener( 'cancel', onClose );
    $modal.addEventListener( 'close', onClose );
    } EJBMPHͷDMPTF͸
    

    DBODFM͔DMPTFΠϕϯτͰ
    ݕ஌Ͱ͖Δ
    

    View Slide

64. const onClose = ( event ) => {
    
    
    noScroll.off(); // ページ本体のスクロール抑止解除
    
    
    const $modal = event.target;
    
    
    $modal.removeEventListener( 'cancel', onClose );
    
    
    $modal.removeEventListener( 'close', onClose );
    
    
    }
    
    
    

    View Slide

65. w جຊ͚ͩͳΒ+4͸΄΅ෆཁ
    w +4ίʔυ͸ѹ౗తʹগͳ͍
    

    ʢϒϥ΢β͕ɺ΄ͱΜͲ΍ͬͯ͘ΕΔʣ
    w ʮϒϥοΫϘοΫεʯ͕ͳ͍
    w τοϓϨΠϠʔΛ࢖͍͍ͨͳΒ
    

    EJBMPHҰ୒
    ݁ہ+4͕ඞཁʁ
    

    View Slide

66. ͓࣋ͪؼΓ༻
    

    ίʔυ
    

    View Slide

67. https://github.com/codegrid/2022-09-16-cssnite-dialog
    

    View Slide

68. https://www.codegrid.net/series/2022-modal-dialog
    

    View Slide

69. ·ͱΊ
    

    View Slide

70. w γϯϓϧ࣮૷ͳΒɺ+4ϥΠϒϥϦෆཁ
    w ΧελϚΠζ͠΍͍͢ɺ੍ޚ͠΍͍͢
    w ࠷લ໘͕อূ͞ΕΔ τοϓϨΠϠʔ
    
    w ϑΥʔΧεɺΩʔϘʔυૢ࡞ɺSPMF੍ޚ
    Ϟʔμϧઐ༻ͷཁૉͰ
    

    ʮ͍͍͜ͱʯͨ͘͞Μ
    

    View Slide

71. Ϟʔμϧ࣮૷͸
    

    ΋͏ɺμϧ͘ͳ͍ʁ
    

    View Slide

72. ͓ΘΓ
    !ZPNPUTV
    

    View Slide