\u30b5\u30a4\u30c8\u306e\u753b\u50cf\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u62e1\u5927\u8868\u793a\u3055\u308c\u308b\u306e\u3092\u307f\u305f\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u304b\uff1f<\/p>\n\n\n\n
\u305d\u306e\u62e1\u5927\u8868\u793a\u3001\u30e2\u30fc\u30c0\u30eb\u30a6\u30a3\u30f3\u30c9\u30a6\u3092\u5b9f\u88c5\u3059\u308b\u3068\u304d\u306b\u3088\u308a\u4fbf\u5229\u3060\u306a\u3068\u601d\u3063\u305f\u3053\u3068\u3092\u3084\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\u4eca\u307e\u3067\u30e2\u30fc\u30c0\u30eb\u3092\u8907\u6570\u8a2d\u7f6e\u3059\u308b\u5834\u5408\u3001HTML\u3067\u30af\u30e9\u30b9\u540d\u3092\u300cmodal1\u300d\u300cmodal2\u300d\u300cmodal3\u300d…\u3068\u3064\u3051\u3066\u3001\u30e2\u30fc\u30c0\u30eb\u304c\u5897\u3048\u308b\u305f\u3073\u306bjQuery \u3092\u305d\u308c\u305e\u308c\u66f8\u3044\u3066\u3044\u307e\u3057\u305f\u3002\u305d\u3053\u3067\u3001\u4eca\u56de\u30e2\u30fc\u30c0\u30eb\u304c\u8907\u6570\u3067\u3082\u30af\u30e9\u30b9\u540d\u3092\u540c\u3058\u306b\u3057\u3066\u3082\u3001\u305d\u308c\u305e\u308c\u306e\u30e2\u30fc\u30c0\u30eb\u30a6\u30a3\u30f3\u30c9\u30a6\u3092\u8868\u793a\u3057\u3066\u304f\u308c\u308b\u3088\u3046\u306b\u3084\u3063\u3066\u307f\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u4eca\u56de\u306f\u3001\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u3089\u30e2\u30fc\u30c0\u30eb\u30a6\u30a3\u30f3\u30c9\u30a6\u304c\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u3092\u60f3\u5b9a\u3057\u3066\u3084\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u3067\u306f\u3001\u3055\u3063\u305d\u304fHTML\u304b\u3089\u66f8\u3044\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
<!-- HTML -->\n\n<div class=\"modal\">\n <div class=\"modal-inner\">\n <!-- open\u30dc\u30bf\u30f3 -->\n <button class=\"openModal\">OpenModal1<\/button>\n <button class=\"openModal\">OpenModal2<\/button>\n <button class=\"openModal\">OpenModal3<\/button>\n <!-- \u30e2\u30fc\u30c0\u30eb\u90e8\u5206 -->\n <div class=\"modalArea\"><!-- class\u540d\u3092modalArea\u3067\u7d71\u4e00 -->\n <div class=\"modalBg\"><\/div><!-- \u30e2\u30fc\u30c0\u30eb\u306e\u80cc\u666f-->\n <div class=\"modalWrapper\"><!-- \u30e2\u30fc\u30c0\u30eb\u306e\u4e2d\u8eab -->\n <div class=\"modalContents\">\n <h1>contents!<\/h1>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <\/p>\n <\/div>\n <div class=\"closeModal\">\u00d7<\/div>\n <\/div>\n <\/div>\n <div class=\"modalArea\">\n <div class=\"modalBg\"><\/div><!-- \u30e2\u30fc\u30c0\u30eb\u306e\u80cc\u666f-->\n <div class=\"modalWrapper\"><!-- \u30e2\u30fc\u30c0\u30eb\u306e\u4e2d\u8eab -->\n <div class=\"modalContents\">\n <h1>modal contents!2<\/h1>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <\/p>\n <\/div>\n <div class=\"closeModal\">\u00d7<\/div>\n <\/div>\n <\/div>\n <div class=\"modalArea\">\n <div class=\"modalBg\"><\/div><!-- \u30e2\u30fc\u30c0\u30eb\u306e\u80cc\u666f-->\n <div class=\"modalWrapper\"><!-- \u30e2\u30fc\u30c0\u30eb\u306e\u4e2d\u8eab -->\n <div class=\"modalContents\">\n <h1>modal contents!3<\/h1>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <\/p>\n <\/div>\n <div class=\"closeModal\">\u00d7<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div><\/code><\/pre>\n\n\n\n\u7d9a\u3044\u3066CSS\u3092\u66f8\u3044\u3066\u30e2\u30fc\u30c0\u30eb\u30a6\u30a3\u30f3\u30c9\u30a6\u3092\u5c11\u3057\u88c5\u98fe\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\/* CSS *\/\n\n.modal-inner {\n position: relative;\n}\n\nbutton {\n padding: 10px;\n background: #fff;\n border: 1px solid #282828;\n border-radius: 2px;\n cursor: pointer;\n}\n\n.modalArea {\n display: none;\n position: fixed;\n z-index: 10;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.modalBg {\n width: 100%;\n height: 100%;\n background: rgba(30, 30, 30, 0.9);\n}\n\n.modalWrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n max-width: 500px;\n height: 315px;\n padding: 10px 30px;\n background: #fff;\n}\n\n.closeModal {\n position: absolute;\n top: 0.5rem;\n right: 1rem;\n cursor: pointer;\n}\n\n.is-open {\n display: block;\n}<\/code><\/pre>\n\n\n\n\u6700\u5f8c\u306bjQuery\u3092\u4f7f\u3063\u3066\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306e\u52d5\u304d\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
$(function () {\n $('.openModal').click(function() { \/\/openModal\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306b\n var btnIndex = $(this).index(); \n \/\/\u4f55\u756a\u76ee\u306e\u30e2\u30fc\u30c0\u30eb\u30dc\u30bf\u30f3\u304b\u3092\u53d6\u5f97\n $('.modalArea').eq(btnIndex).addClass('is-open'); \n \/\/\u30af\u30ea\u30c3\u30af\u3057\u305f\u30e2\u30fc\u30c0\u30eb\u30dc\u30bf\u30f3\u3068\u540c\u3058\u756a\u76ee\u306e\u30e2\u30fc\u30c0\u30eb\u3092\u8868\u793a\u3059\u308b\u3002addClass\u3067is-open\u30af\u30e9\u30b9\u3092\u8ffd\u52a0\u3057\u3066\u8868\u793a\u3059\u308b\n\u3000\u3000\u3000\u3000$('html, body').css('overflow', 'hidden'); \n \/\/ overflow:hidden;\u306e\u8ffd\u52a0\u3067\u80cc\u666f\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u7981\u6b62\u306b\n });\n $('.closeModal, .modalBg').click(function() { \/\/closeModal\u304bmodalBg\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306b\n $('.modalArea').removeClass('is-open'); \n \/\/\u30e2\u30fc\u30c0\u30eb\u3092\u975e\u8868\u793a\u306b\u3059\u308b\u3002removeClass\u3067is-open\u30af\u30e9\u30b9\u3092\u524a\u9664\u3057\u3066\u975e\u8868\u793a\u306b\u3059\u308b\n\u3000\u3000\u3000\u3000$('html, body').removeAttr('style'); \n \/\/\u8ffd\u52a0\u3057\u305foverflow:hidden;\u3092\u524a\u9664\n });\n\n});<\/code><\/pre>\n\n\n\n\u3053\u308c\u3060\u3051\u66f8\u3044\u3066\u304a\u3051\u3070\u30011,2,3\u756a\u76ee\u306e\u30dc\u30bf\u30f3\u3092\u305d\u308c\u305e\u308c\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306b\u3001\u305d\u308c\u306b\u5fdc\u3058\u305f\u30e2\u30fc\u30c0\u30eb\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u30dc\u30bf\u30f3\u3092\u5897\u3084\u3057\u305f\u3044\u3068\u601d\u3063\u305f\u6642\u306bjQuery\u3082\u8ffd\u52a0\u3067\u66f8\u304b\u306a\u304f\u3066\u3044\u3044\u3068\u601d\u3048\u3070\u3061\u3087\u3063\u3068\u306f\u697d\u3067\u3059\u3088\u306d\u3002<\/p>\n\n\n\n
\u80cc\u666f\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u7981\u6b62\u306b\u3059\u308b\u65b9\u6cd5\u306f\u3001\u3044\u308d\u3044\u308d\u3042\u308b\u307f\u305f\u3044\u3067\u3059\u304c\u4eca\u56de\u306f\u3001\u4e0a\u8a18\u306e\u3082\u306e\u3092\u4f7f\u3063\u3066\u307f\u307e\u3057\u305f\u3002\u3082\u3063\u3068\u3044\u3044\u65b9\u6cd5\u304c\u3042\u308c\u3070\u6559\u3048\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
\u3042\u3068\u4eca\u56de\u306f\u3001\u8868\u793a\u975e\u8868\u793a\u306e\u3068\u304d\u306bdisplay:none;,display:block;\u3068addClass(),removeClass()\u3092\u304f\u307f\u3042\u308f\u305b\u3066\u8868\u793a\u975e\u8868\u793a\u306b\u3059\u308b\u65b9\u6cd5\u3067\u3057\u305f\u304c\u3001\u3082\u3061\u308d\u3093fadeIn(),fadeOut()\u3067\u3082\u3067\u304d\u307e\u3057\u305f\u3002\u3075\u308f\u3063\u3068\u51fa\u3066\u304f\u308b\u611f\u3058\u3082\u3044\u3044\u3067\u3059\u306d\u3002<\/p>\n\n\n\n
\u4ee5\u4e0a\u3001\u540c\u3058\u30af\u30e9\u30b9\u540d\u3067\u8907\u6570\u30e2\u30fc\u30c0\u30eb\u3084\u3063\u3066\u307f\u305f\u3067\u3057\u305f\u301c<\/p>\n","protected":false},"excerpt":{"rendered":"
\u30b5\u30a4\u30c8\u306e\u753b\u50cf\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u62e1\u5927\u8868\u793a\u3055\u308c\u308b\u306e\u3092\u307f\u305f\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u304b\uff1f \u305d\u306e\u62e1\u5927\u8868\u793a\u3001\u30e2\u30fc\u30c0\u30eb\u30a6\u30a3\u30f3\u30c9\u30a6\u3092\u5b9f\u88c5\u3059\u308b\u3068\u304d\u306b\u3088\u308a\u4fbf\u5229\u3060\u306a\u3068\u601d\u3063\u305f\u3053\u3068\u3092\u3084\u3063\u3066\u307f\u307e\u3057\u305f\u3002 \u4eca\u307e\u3067\u30e2\u30fc\u30c0\u30eb\u3092\u8907\u6570\u8a2d\u7f6e\u3059\u308b\u5834\u5408\u3001HTML\u3067\u30af\u30e9\u30b9\u540d\u3092\u300c […]<\/p>\n","protected":false},"author":17,"featured_media":982,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[214],"tags":[37,24],"class_list":["post-974","post","type-post","status-publish","format-standard","has-post-thumbnail","category-214","tag-javascript","tag-web"],"_links":{"self":[{"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/posts\/974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/comments?post=974"}],"version-history":[{"count":0,"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/posts\/974\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/media\/982"}],"wp:attachment":[{"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/media?parent=974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/categories?post=974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/tags?post=974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}