{"id":1005,"date":"2024-04-03T13:41:41","date_gmt":"2024-04-03T04:41:41","guid":{"rendered":"https:\/\/yuzum.com\/blog\/?p=1005"},"modified":"2024-05-14T09:16:13","modified_gmt":"2024-05-14T00:16:13","slug":"popup","status":"publish","type":"post","link":"https:\/\/yuzum.com\/blog\/20240403_popup","title":{"rendered":"\u753b\u50cf\u306e\u62e1\u5927\u8868\u793a(\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7)"},"content":{"rendered":"<h2>\u3084\u308a\u305f\u3044\u3053\u3068<\/h2>\r\n<p>\u753b\u50cf\u306e\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u304c\u3057\u305f\u3044\uff01<\/p>\r\n\r\n<h2>\u30bf\u30b0\u3092\u8a2d\u7f6e<\/h2>\r\n<p>html\u5185\u3067\u3042\u308c\u3070\u3069\u3053\u3067\u3082\u826f\u3044\u306e\u3067\u3001\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u3057\u305f\u3044\u30da\u30fc\u30b8\u306b\u4ee5\u4e0b\u306e\u30bf\u30b0\u3092\u8ffd\u52a0\u3059\u308b<\/p>\r\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;modal-container&quot;&gt;\r\n    &lt;div&gt;&lt;img src=&quot;&quot;&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\r\n\r\n<h2>\u753b\u50cf\u306b\u30af\u30e9\u30b9\u3092\u4ed8\u4e0e<\/h2>\r\n<p>\u4e0a\u306e\u30bf\u30b0\u3068\u306f\u5225\u306b\u3001\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u3057\u305f\u3044\u753b\u50cf\u306b\u30af\u30e9\u30b9\u3092\u8ffd\u52a0\u3059\u308b\u3002<br>\u30af\u30e9\u30b9\u540d\u306f\u4efb\u610f\u306e\u3082\u306e\u3092\u3002<\/p>\r\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;img src=&quot;\u753b\u50cf\u306e\u30d1\u30b9&quot; class=&quot;popup&quot;&gt;\r\n<\/pre>\r\n\r\n<h2>\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8a18\u8f09<\/h2>\r\n<p>jQuery\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<br>\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u30da\u30fc\u30b8\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\r\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nconst modal = jQuery('#modal-container');\r\nconst img = modal.find('img');\r\njQuery('img.popup').each(function(index) {\r\njQuery(this).click(function() {\r\nimg.attr('src', jQuery(this).attr('src'));\r\nmodal.show();\r\n})\r\n});\r\nmodal.click(function() {\r\n$(this).hide();\r\n});\r\n<\/pre>\r\n\r\n\r\n<h2>\u30b9\u30bf\u30a4\u30eb\u3092\u8a18\u8f09<\/h2>\r\n<p>\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306b\u4ee5\u4e0b\u30b3\u30fc\u30c9\u3092\u8ffd\u8a18\u3057\u307e\u3059\u3002<\/p>\r\n\r\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n#modal-container {\r\ndisplay: none;\r\nposition: fixed;\r\nbackground: rgba(0, 0, 0, .6);\r\ntop: 0;\r\nbottom: 0;\r\nleft: 0;\r\nright: 0;\r\nz-index: 9999;\r\n}\r\n#modal-container&gt;div {\r\ndisplay: flex;\r\nheight: 100vh;\r\njustify-content: center;\r\nalign-items: center;\r\n}\r\n#modal-container&gt;div img {\r\nmax-width: calc(100vw - 30px);\r\nmax-height: calc(100vh - 30px);\r\n}\r\nimg.popup {\r\ncursor: pointer;\r\n}\r\n<\/pre>\r\n\r\n<h2>\u5b8c\u6210\uff01<\/h2>\r\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/yuzum.com\/blog\/wp-content\/uploads\/check-1-250x250.jpg\" alt=\"\" width=\"250\" height=\"250\" class=\"popup aligncenter size-thumbnail wp-image-935\" srcset=\"https:\/\/yuzum.com\/blog\/wp-content\/uploads\/check-1-250x250.jpg 250w, https:\/\/yuzum.com\/blog\/wp-content\/uploads\/check-1-300x300.jpg 300w, https:\/\/yuzum.com\/blog\/wp-content\/uploads\/check-1-100x100.jpg 100w, https:\/\/yuzum.com\/blog\/wp-content\/uploads\/check-1-150x150.jpg 150w, https:\/\/yuzum.com\/blog\/wp-content\/uploads\/check-1.jpg 320w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/>","protected":false},"excerpt":{"rendered":"\u3084\u308a\u305f\u3044\u3053\u3068 \u753b\u50cf\u306e\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u304c\u3057\u305f\u3044\uff01 \u30bf\u30b0\u3092\u8a2d\u7f6e html\u5185\u3067\u3042\u308c\u3070\u3069\u3053\u3067\u3082\u826f\u3044\u306e\u3067\u3001\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u3057\u305f\u3044\u30da\u30fc\u30b8\u306b\u4ee5\u4e0b\u306e\u30bf\u30b0\u3092\u8ffd\u52a0\u3059\u308b &lt;div id=&quot;modal-contain ... ","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[22],"class_list":["post-1005","post","type-post","status-publish","format-standard","hentry","category-creative","tag-css"],"_links":{"self":[{"href":"https:\/\/yuzum.com\/blog\/wp-json\/wp\/v2\/posts\/1005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yuzum.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yuzum.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yuzum.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yuzum.com\/blog\/wp-json\/wp\/v2\/comments?post=1005"}],"version-history":[{"count":4,"href":"https:\/\/yuzum.com\/blog\/wp-json\/wp\/v2\/posts\/1005\/revisions"}],"predecessor-version":[{"id":1024,"href":"https:\/\/yuzum.com\/blog\/wp-json\/wp\/v2\/posts\/1005\/revisions\/1024"}],"wp:attachment":[{"href":"https:\/\/yuzum.com\/blog\/wp-json\/wp\/v2\/media?parent=1005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yuzum.com\/blog\/wp-json\/wp\/v2\/categories?post=1005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yuzum.com\/blog\/wp-json\/wp\/v2\/tags?post=1005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}