{"title":"モーダルウィンドウテストページ","description":"\u003cp\u003e\u003cmeta charset=\"UTF-8\"\u003e \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\u003cscript\u003e\n    \/\/ モーダルウィンドウ全体を指す要素\nconst modal = document.getElementById('modal');\n\n\/\/ モーダル内で拡大表示される画像を指す要素\nconst modalImg = document.getElementById('modalImage');\n\n\/\/ .popupクラスを持つ画像のリストです。これらの画像をクリックすると、モーダルが表示されます\nconst imgs = document.querySelectorAll('.popup');\n\n\/\/ モーダルを閉じるためのボタン\nconst closeSpan = document.getElementById('close');\n\n\/\/ 画像クリックでモーダルを表示するイベント\nfor( let img of imgs) {\n    img.onclick = function(){\n\n        モーダルを表示する\n        modal.style.opacity = \"1\";\n        modal.style.visibility = \"visible\";\n\n        \/\/ モーダルで表示する画像に、クリックした画像のパスを設定する\n        modalImg.src = this.src;\n    }\n}\n\n\/\/ クローズボタンを押したらモーダルを閉じる\ncloseSpan.onclick = function() {\n    modal.style.opacity = \"0\";\n    modal.style.visibility = \"hidden\";\n}\n\n\/\/ 画像以外の部分をクリックしたらモーダルを閉じる\nwindow.onclick = function(event) {\n    if (event.target == modal) {\n        modal.style.opacity = \"0\";\n        modal.style.visibility = \"hidden\";\n    }\n}\n  \u003c\/script\u003e\u003c\/p\u003e\n\u003cstyle\u003e\n \/* モーダルのスタイル *\/\n.modal {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: fixed;\n    z-index: 1;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    background-color: rgba(0,0,0,0.4); \/* 背景色 *\/\n    opacity: 0; \/* 初期状態では透明 *\/\n    visibility: hidden; \/* 初期状態では不可視 *\/\n    transition: opacity 0.5s, visibility 0.5s; \/* アニメーション効果 *\/\n}\n\n\/* モーダルの画像スタイル *\/\n.modal-content {\n    display: block;\n    width: 80%;\n    max-width: 700px;\n}\n\n\/* モーダルの閉じるボタン *\/\n#close {\n    position: absolute;\n    top: 15px;\n    right: 35px;\n    color: #f1f1f1;\n    font-size: 40px;\n    font-weight: bold;\n    cursor: pointer;\n}\n\n\/* ココから下は画像を並べてる部分のスタイルなので\n　　モーダルとは直接関係がない部分です　　　　　 *\/\n\/********************************************\/\n.wrap {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    list-style: none;\n}\n\n.img  {\n    flex-shrink: 0;\n    width: 150px;\n    height: 150px;\n    padding: 20px;\n    border: 1px solid #000;\n    cursor: pointer;\n    transition: opacity 0.3s ;\n}\n\n.img:hover {\n    opacity: 0.7;\n}\n\n.img img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\u003c\/style\u003e\n\u003c!-- ポップアップ表示させたい画像に「popup」クラスを付与しています --\u003e\n\u003cdiv class=\"wrap\"\u003e\n\u003cp class=\"img\"\u003e\u003cimg class=\"popup\" alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0616\/2651\/5539\/files\/DSC_6364.jpg?v=1745306111\"\u003e\u003c\/p\u003e\n\u003cp class=\"img\"\u003e\u003cimg src=\"https:\/\/admin.shopify.com\/store\/fa6bf7-4b\/content\/files\/29460691124307?start=MQ%3D%3D\u0026amp;selectedView=all\" alt=\"サンプル画像\" class=\"popup\"\u003e\u003c\/p\u003e\n\u003cp class=\"img\"\u003e\u003cimg src=\"https:\/\/admin.shopify.com\/store\/fa6bf7-4b\/content\/files\/29460691058771?start=MQ%3D%3D\u0026amp;selectedView=all\" alt=\"サンプル画像\" class=\"popup\"\u003e\u003c\/p\u003e\n\u003c\/div\u003e","products":[],"url":"https:\/\/riveriver.com\/collections\/%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%83%86%e3%82%b9%e3%83%88%e3%83%9a%e3%83%bc%e3%82%b8.oembed","provider":"riveRiver","version":"1.0","type":"link"}