[{"data":1,"prerenderedAt":38},["ShallowReactive",2],{"site-info":3,"post-tech-1775":7},{"name":4,"description":5,"url":6},"アイ・エル・アール","フリーランスWEB制作","https:\u002F\u002Filr.jp\u002Fwp\u002F",{"ID":8,"title":9,"post_type":10,"post_type_label":11,"url":12,"date":13,"modified":14,"thumbnail":15,"thumb":15,"tag":16,"slug":25,"excerpt":26,"content":27,"simple_css":28,"adjacent":29},1775,"dialog要素とtemplate要素を使用してモーダルウィンドウを作る","tech","Tech Blog","\u002Ftech\u002F1775\u002F","2023.07.29","2025.10.29","\u002Fuploads\u002F2023\u002F07\u002Fimg_window.webp",[17,21],{"name":18,"slug":19,"url":20},"HTML","html","\u002Ftag\u002Fhtml\u002F",{"name":22,"slug":23,"url":24},"JavaScript","javascript","\u002Ftag\u002Fjavascript\u002F","dialog%e8%a6%81%e7%b4%a0%e3%81%a8template%e8%a6%81%e7%b4%a0%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e3%82%92","概要 dialog要素でモーダルを表示しつつ、template要素で表示する内容を切り替えるモーダルウィンドを作成します。 サンプル ソース HTML dialogの中をformで囲っています。buttonにformme […]","\n\u003Ch2 class=\"wp-block-heading\">概要\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fdialog\" target=\"_blank\" rel=\"noreferrer noopener\">dialog要素\u003C\u002Fa>でモーダルを表示しつつ、\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Ftemplate\" target=\"_blank\" rel=\"noreferrer noopener\">template要素\u003C\u002Fa>で表示する内容を切り替えるモーダルウィンドを作成します。\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">サンプル\u003C\u002Fh2>\n\n\n\n\u003Ciframe id=\"tools\" src=\"\u002Ftools\u002F1775\u002F?107928133\">\u003C\u002Fiframe>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">ソース\u003C\u002Fh2>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">HTML\u003C\u002Fh3>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-html\" data-lang=\"HTML\">\u003Ccode><div>\n  <button class="showDialog" data-id="template1">template1<\u002Fbutton>\n<\u002Fdiv>\n<div>\n  <button class="showDialog" data-id="template2">template2<\u002Fbutton>\n<\u002Fdiv>\n<div>\n  <button class="showDialog" data-id="template3">template3<\u002Fbutton>\n<\u002Fdiv>\n\n<dialog id="favDialog">\n  <form>\n    <div class="content-wrap">\n      <button value="cancel" formmethod="dialog" class="btn-close"><\u002Fbutton>\n      <div class="content-main"><\u002Fdiv>\n      <div class="btns">\n        <button value="cancel" formmethod="dialog">Close<\u002Fbutton>\n      <\u002Fdiv>\n    <\u002Fdiv>\n  <\u002Fform>\n<\u002Fdialog>\n\n<template id="template1">\n  <div>\n    template1\n  <\u002Fdiv>\n<\u002Ftemplate>\n<template id="template2">\n  <div>\n    template2\n  <\u002Fdiv>\n<\u002Ftemplate>\n<template id="template3">\n  <div>\n    template3\n  <\u002Fdiv>\n<\u002Ftemplate>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ccode>dialog\u003C\u002Fcode>の中を\u003Ccode>form\u003C\u002Fcode>で囲っています。\u003Ccode>button\u003C\u002Fcode>に\u003Ccode>formmethod=\"dialog\"\u003C\u002Fcode>を指定することによってモーダルウィンドウを閉じることができます。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ccode>template\u003C\u002Fcode>はIDを振って表示させたいコンテンツ内容をコーディングしています。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">表示元のボタンに設定した\u003Ccode>data-id=\"template1\"\u003C\u002Fcode>と\u003Ccode>template id=\"template1\"\u003C\u002Fcode>を\u003Ccode>template1（ユニークな値）\u003C\u002Fcode>合わせることによってモーダルウィンドウの内容を出し分けます。\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">CSS\u003C\u002Fh3>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-css\" data-lang=\"CSS\">\u003Ccode>#favDialog{\n    width: 100%;\n    max-width: 100%;\n    max-height: 100%;\n    border: none;\n    background-color: transparent;\n    position: fixed;\n    z-index:1000;\n    left: 0;\n    top: 0;\n    padding: 0;\n    margin: auto;\n\n    user-select: text;\n    visibility: visible;\n    inset-block-start: 0;\n    inset-block-end: 0;\n}\n#favDialog::backdrop{\n    display: none;\n}\n#favDialog::before{\n    content: "";\n    display: block;\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background: #000000aa;\n}\n\n#favDialog,\n#favDialog::before{\n    animation: fadeout 500ms ease forwards;\n}\n\n#favDialog[open],\n#favDialog[open]::before{\n    animation: fadein 500ms ease forwards;\n}\n\n#favDialog form{\n    display: block;\n    padding: 40px 0 30px 0;\n    position: relative;\n}\n#favDialog .btns{\n    text-align: center;\n}\n\n#favDialog .btn-close{\n    position: absolute;\n    top: -35px;\n    right: 0;\n    width: 30px;\n    height: 30px;\n    border: none;\n    background-color: transparent;\n    padding: 0;\n}\n#favDialog .btn-close:before{\n    content: "";\n    display: block;\n    width: 30px;\n    height: 2px;\n    background-color: #ffffff;\n    transform: rotate(-45deg);\n    transform-origin: 50% 50%;\n}\n#favDialog .btn-close:after{\n    content: "";\n    display: block;\n    width: 30px;\n    height: 2px;\n    background-color: #ffffff;\n    transform: translate(0,-2px) rotate(45deg);\n    transform-origin: 50% 50%;\n}\n\n#favDialog .content-wrap{\n    background-color: #ffffff;\n    max-width: 500px;\n    width:100%;\n    margin: 0 auto;\n    padding: 2rem;\n    border-radius: 10px;\n    border: 1px solid #000000;\n    position: relative;\n    z-index: 2;\n}\n\n@keyframes fadein{\n    0%{\n        opacity: 0;\n    }\n    100%{\n        opacity: 1;\n    }\n}\n@keyframes fadeout{\n    0%{\n        opacity: 1;\n        display: block;\n    }\n    99%{\n        opacity: 0;\n        display: block;\n    }\n    100%{\n        opacity: 0;\n        display: none;\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ccode>dialog\u003C\u002Fcode>の挙動が自分が実装したい挙動と違っていたのでCSSで無理やり変更しています。\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">また、アニメーションがないため、\u003Ccode>keyframes\u003C\u002Fcode>を設定しています。\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">JavaScript\u003C\u002Fh3>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>(function(){\n  window.addEventListener('load',()=>{\n    const showButtons = document.querySelectorAll(".showDialog");\n    const favDialog = document.getElementById("favDialog");\n\n    \u002F\u002F ボタンで <dialog> をモーダルに開く\n    showButtons.forEach((item)=>{\n      item.addEventListener("click", (e) => {\n        let id = e.target.getAttribute('data-id');\n        const content = document.querySelector(`#${id}`).content;\n        const clone = document.importNode(content, true);\n        let $wrap = document.querySelector('#favDialog .content-main');\n        for (const child of $wrap.children) {\n          $wrap.removeChild(child);\n        }\n        $wrap.appendChild(clone);\n\n        favDialog.showModal();\n      });\n    });\n\n    document.querySelector('#favDialog').addEventListener('click',(e)=>{\n      if(e.target === e.currentTarget || e.target.tagName.toLowerCase() === 'form'){\n        favDialog.close();\n      }\n    },false);\n\n  },false);\n\n})();\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>let id = e.target.getAttribute('data-id');\nconst content = document.querySelector(`#${id}`).content;\nconst clone = document.importNode(content, true);\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">クリックしたボタンの\u003Ccode>data-id\u003C\u002Fcode>を取得して、\u003Ccode>template要素\u003C\u002Fcode>を取得して要素をコピーしています。\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>let $wrap = document.querySelector('#favDialog .content-main');\nfor (const child of $wrap.children) {\n   $wrap.removeChild(child);\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">dialog要素に挿入する前にdialog内の要素を削除しておきます。\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>$wrap.appendChild(clone);\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">クローンした要素を挿入\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>favDialog.showModal();\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">モーダルを表示\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\">\u003Ccode>document.querySelector('#favDialog').addEventListener('click',(e)=>{\n  if(e.target === e.currentTarget || e.target.tagName.toLowerCase() === 'form'){\n     favDialog.close();\n  }\n},false);\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">モーダル背景をクリックで閉じるようにしています。\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Github\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fhiron712\u002Fdialog_template\" target=\"_blank\" rel=\"noreferrer noopener\">https:\u002F\u002Fgithub.com\u002Fhiron712\u002Fdialog_template\u003C\u002Fa>\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">ブラウザ対応\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">IEがほぼなくなった今、一部関数が使えない場合があるのでそこを気をつければ、使用しても良いのではないでしょうか？\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ca href=\"https:\u002F\u002Fcaniuse.com\u002F?search=dialog\" target=\"_blank\" rel=\"noreferrer noopener\">dialog\u003C\u002Fa>\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Ca href=\"https:\u002F\u002Filr.jp\u002Ftech\u002F1027\u002F\" target=\"_blank\" rel=\"noreferrer noopener\">template\u003C\u002Fa>\u003C\u002Fp>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"\u002F>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">まとめ\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">dialog要素の挙動は決まっているので、自分自身が実装したい挙動と違う場合は難しいかもしれませんが、ブラウザがモーダルウィンドを制御してくれているのでその分のJavaScriptを書かなくて済む、モーダルにフォームが表示できて値を渡すことができる、ESCキーでモーダルを閉じることができるなど、メリットもあるので使用しても良いと思います、\u003C\u002Fp>\n","    #favDialog{\r\n        width: 100%;\r\n        max-width: 100%;\r\n        max-height: 100%;\r\n        border: none;\r\n        background-color: transparent;\r\n        position: fixed;\r\n        z-index:1000;\r\n        left: 0;\r\n        top: 0;\r\n        padding: 0;\r\n        margin: auto;\r\n\r\n        user-select: text;\r\n        visibility: visible;\r\n        inset-block-start: 0;\r\n        inset-block-end: 0;\r\n    }\r\n    #favDialog::backdrop{\r\n        display: none;\r\n    }\r\n    #favDialog::before{\r\n        content: \"\";\r\n        display: block;\r\n        position: fixed;\r\n        left: 0;\r\n        right: 0;\r\n        top: 0;\r\n        bottom: 0;\r\n        background: #000000aa;\r\n    }\r\n\r\n    #favDialog,\r\n    #favDialog::before{\r\n        animation: fadeout 500ms ease forwards;\r\n    }\r\n\r\n    #favDialog[open],\r\n    #favDialog[open]::before{\r\n        animation: fadein 500ms ease forwards;\r\n    }\r\n\r\n    #favDialog form{\r\n        display: block;\r\n        padding: 40px 0 30px 0;\r\n        position: relative;\r\n    }\r\n    #favDialog .btns{\r\n        text-align: center;\r\n    }\r\n\r\n    #favDialog .btn-close{\r\n        position: absolute;\r\n        top: -35px;\r\n        right: 0;\r\n        width: 30px;\r\n        height: 30px;\r\n        border: none;\r\n        background-color: transparent;\r\n        padding: 0;\r\n    }\r\n    #favDialog .btn-close:before{\r\n        content: \"\";\r\n        display: block;\r\n        width: 30px;\r\n        height: 2px;\r\n        background-color: #ffffff;\r\n        transform: rotate(-45deg);\r\n        transform-origin: 50% 50%;\r\n    }\r\n    #favDialog .btn-close:after{\r\n        content: \"\";\r\n        display: block;\r\n        width: 30px;\r\n        height: 2px;\r\n        background-color: #ffffff;\r\n        transform: translate(0,-2px) rotate(45deg);\r\n        transform-origin: 50% 50%;\r\n    }\r\n\r\n    #favDialog .content-wrap{\r\n        background-color: #ffffff;\r\n        max-width: 500px;\r\n        width:100%;\r\n        margin: 0 auto;\r\n        padding: 2rem;\r\n        border-radius: 10px;\r\n        border: 1px solid #000000;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    @keyframes fadein{\r\n        0%{\r\n            opacity: 0;\r\n        }\r\n        100%{\r\n            opacity: 1;\r\n        }\r\n    }\r\n    @keyframes fadeout{\r\n        0%{\r\n            opacity: 1;\r\n            display: block;\r\n        }\r\n        99%{\r\n            opacity: 0;\r\n            display: block;\r\n        }\r\n        100%{\r\n            opacity: 0;\r\n            display: none;\r\n        }\r\n    }\r\n\r\n.showDialog{\r\nmargin-bottom:30px;\r\n}\r\n\r\n",{"next":30,"previous":34},{"ID":31,"title":32,"post_type":10,"date":33},1803,"Node.jsのバージョン管理","2023.08.02",{"ID":35,"title":36,"post_type":10,"date":37},1769,"HTMLメール用にインラインCSSに変換する","2023.07.27",1780554991209]