Skip to content

Yutaka Kobayashi / jsStudy

Go to a project
Commit c639920c by Yutaka Kobayashi
Options

閉じるボタンをpタグに変更

1 parent fb6bdbed
Expand all
Inline Side-by-side
Showing with 23 additions and 12 deletions
develop/.tmp/assets/js/home.js
......@@ -15,7 +15,7 @@
\*******************************/
/***/ (function() {
eval("class Home {\n constructor() {\n this.modal();\n this.fadeIn();\n }\n\n modal() {\n const body = document.getElementsByTagName(\"body\")[0];\n const btn = document.querySelectorAll(\".novelList__button\");\n const modalBack = document.querySelector(\".modalBackground\");\n const modal = document.querySelectorAll(\".modal\");\n const closeBtn = document.querySelector(\".modal__button\");\n\n // モーダルを表示する\n for (let i = 0; i < btn.length; i++) {\n btn[i].addEventListener(\"click\", addOpen);\n function addOpen(e) {\n e.preventDefault();\n body.classList.add(\"open\");\n modalBack.classList.add(\"open\");\n modal[i].classList.add(\"open\");\n }\n }\n\n // モーダルを非表示にする\n closeBtn.addEventListener(\"click\", function () {\n body.classList.remove(\"open\");\n modalBack.classList.remove(\"open\");\n for (let i = 0; i < modal.length; i++) {\n modal[i].classList.remove(\"open\");\n }\n });\n\n function menuClick() {\n const menus = document.getElementsByClassName(\"close\");\n body.classList.remove(\"open\");\n modalBack.classList.remove(\"open\");\n const hogeElements = document.querySelectorAll(\".modal\");\n\n hogeElements.forEach((item) => {\n item.classList.remove(\"open\");\n });\n }\n\n const menus = document.getElementsByClassName(\"close\");\n for (let i = 0; i < menus.length; i++) {\n menus[i].addEventListener(\"click\", menuClick, false);\n }\n }\n\n // フェードイン\n fadeIn() {\n function scroll_effect() {\n var element = document.getElementsByClassName(\"scrollUp\");\n if (!element) return;\n\n var scrollY = window.pageYOffset;\n var windowHeight = window.innerHeight;\n var showTiming = 200;\n for (var i = 0; i < element.length; i++) {\n var elementClientRect = element[i].getBoundingClientRect();\n var elementY = scrollY + elementClientRect.top;\n if (scrollY > elementY - windowHeight + showTiming) {\n element[i].classList.add(\"is-show\");\n }\n }\n }\n window.addEventListener(\"scroll\", scroll_effect);\n }\n}\n\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n new Home();\n});\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/home.js?");
eval("class Home {\n constructor() {\n this.modal();\n this.fadeIn();\n }\n\n modal() {\n const body = document.getElementsByTagName(\"body\")[0];\n const btn = document.querySelectorAll(\".novelList__button\");\n const modalBack = document.querySelector(\".modalBackground\");\n const modal = document.querySelectorAll(\".modal\");\n const closeBtn = document.querySelector(\".modal__button\");\n\n // モーダルを表示する\n for (let i = 0; i < btn.length; i++) {\n btn[i].addEventListener(\"click\", addOpen);\n function addOpen(e) {\n e.preventDefault();\n body.classList.add(\"open\");\n modalBack.classList.add(\"open\");\n modal[i].classList.add(\"open\");\n }\n }\n\n // モーダルを非表示にする\n closeBtn.addEventListener(\"click\", function () {\n body.classList.remove(\"open\");\n modalBack.classList.remove(\"open\");\n for (let i = 0; i < modal.length; i++) {\n modal[i].classList.remove(\"open\");\n }\n });\n\n function menuClick() {\n const menus = document.getElementsByClassName(\"close\");\n body.classList.remove(\"open\");\n modalBack.classList.remove(\"open\");\n const hogeElements = document.querySelectorAll(\".modal\");\n\n hogeElements.forEach((item) => {\n item.classList.remove(\"open\");\n });\n }\n\n const menus = document.getElementsByClassName(\"close\");\n for (let i = 0; i < menus.length; i++) {\n menus[i].addEventListener(\"click\", menuClick, false);\n }\n\n const menus02 = document.getElementsByClassName(\"modal__button\");\n for (let i = 0; i < menus.length; i++) {\n menus02[i].addEventListener(\"click\", menuClick, false);\n }\n }\n\n // フェードイン\n fadeIn() {\n function scroll_effect() {\n var element = document.getElementsByClassName(\"scrollUp\");\n if (!element) return;\n\n var scrollY = window.pageYOffset;\n var windowHeight = window.innerHeight;\n var showTiming = 200;\n for (var i = 0; i < element.length; i++) {\n var elementClientRect = element[i].getBoundingClientRect();\n var elementY = scrollY + elementClientRect.top;\n if (scrollY > elementY - windowHeight + showTiming) {\n element[i].classList.add(\"is-show\");\n }\n }\n }\n window.addEventListener(\"scroll\", scroll_effect);\n }\n}\n\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n new Home();\n});\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/home.js?");
/***/ })
......
develop/.tmp/assets/styles/dist/modal.min.css
.mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:.8;filter:alpha(opacity=80)}.mfp-hide{display:none !important}.btn{width:200px;margin-left:20px}.btn__link{display:block;font-size:18px;text-align:center;background-color:#fff;color:#333;text-decoration:none;border:2px solid #333;border-radius:5px}.btn__text{display:block;padding:7px 5px}.modalBackground{width:100%;height:100vh;background-color:rgba(0,0,0,.6);position:fixed;top:0;left:0;opacity:0;visibility:hidden}.modal{background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);opacity:0;visibility:hidden;transition:opacity .3s;text-align:center;max-width:700px}.modal.open{opacity:1;visibility:inherit}.modalInner{padding:45px 172px 50px;position:relative}.close{width:25px;height:25px;position:absolute;top:-36px;right:0;cursor:pointer}.close__line{width:4px;height:25px;background-color:#fff;border-radius:2px}.close__line.--type01{display:inline-block;transform:rotate(45deg)}.close__line.--type02{position:absolute;top:0;left:40%;display:inline-block;transform:rotate(-45deg)}body.open{height:100vh;overflow-y:hidden}.modalBackground.open{opacity:1;visibility:inherit}.modal__title{font-size:20px;margin-bottom:30px;font-weight:800;text-align:center}.modal__text{text-align:left;line-height:1.7}.modal__button{background:#f8f8f8;padding:15px 100px;border-radius:50px;display:inline-block;margin-top:35px}/*# sourceMappingURL=modal.min.css.map */
.mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:.8;filter:alpha(opacity=80)}.mfp-hide{display:none !important}.btn{width:200px;margin-left:20px}.btn__link{display:block;font-size:18px;text-align:center;background-color:#fff;color:#333;text-decoration:none;border:2px solid #333;border-radius:5px}.btn__text{display:block;padding:7px 5px}.modalBackground{width:100%;height:100vh;background-color:rgba(0,0,0,.6);position:fixed;top:0;left:0;opacity:0;visibility:hidden}.modal{background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);opacity:0;visibility:hidden;transition:opacity .3s;text-align:center;max-width:700px}.modal.open{opacity:1;visibility:inherit}.modalInner{padding:45px 172px 50px;position:relative}.close{width:25px;height:25px;position:absolute;top:-36px;right:0;cursor:pointer}.close__line{width:4px;height:25px;background-color:#fff;border-radius:2px}.close__line.--type01{display:inline-block;transform:rotate(45deg)}.close__line.--type02{position:absolute;top:0;left:40%;display:inline-block;transform:rotate(-45deg)}body.open{height:100vh;overflow-y:hidden}.modalBackground.open{opacity:1;visibility:inherit}.modal__title{font-size:20px;margin-bottom:30px;font-weight:800;text-align:center}.modal__text{text-align:left;line-height:1.7}.modal__button{background:#f8f8f8;padding:15px 100px;border-radius:50px;display:inline-block;margin-top:35px;cursor:pointer}/*# sourceMappingURL=modal.min.css.map */
develop/.tmp/assets/styles/dist/modal.min.css.map
{"version":3,"sourceRoot":"","sources":["../../../../src/assets/styles/dist/modal.min.scss"],"names":[],"mappings":"AACA,QACE,MACA,OACA,WACA,YACA,aACA,gBACA,eACA,mBACA,WACA,yBAGF,UACE,wBAIF,KACE,YACA,iBAGF,WACE,cACA,eACA,kBACA,sBACA,WACA,qBACA,sBACA,kBAGF,WACE,cACA,gBAIF,iBACE,WACA,aACA,gCACA,eACA,MACA,OACA,UACA,kBAGF,OACE,sBACA,kBACA,QACA,SACA,gCACA,UACA,kBACA,uBACA,kBACA,gBAEA,YACE,UACA,mBAIJ,YACE,wBACA,kBAIF,OACE,WACA,YACA,kBACA,UACA,QACA,eAGF,aACE,UACA,YACA,sBACA,kBAEA,sBACE,qBACA,wBAGF,sBACE,kBACA,MACA,SACA,qBACA,yBAKJ,UACE,aACA,kBAGF,sBACE,UACA,mBAGF,cACE,eACA,mBACA,gBACA,kBAGF,aACE,gBACA,gBAGF,eACE,mBACA,mBACA,mBACA,qBACA","file":"modal.min.css"}
\ No newline at end of file
{"version":3,"sourceRoot":"","sources":["../../../../src/assets/styles/dist/modal.min.scss"],"names":[],"mappings":"AACA,QACE,MACA,OACA,WACA,YACA,aACA,gBACA,eACA,mBACA,WACA,yBAGF,UACE,wBAIF,KACE,YACA,iBAGF,WACE,cACA,eACA,kBACA,sBACA,WACA,qBACA,sBACA,kBAGF,WACE,cACA,gBAIF,iBACE,WACA,aACA,gCACA,eACA,MACA,OACA,UACA,kBAGF,OACE,sBACA,kBACA,QACA,SACA,gCACA,UACA,kBACA,uBACA,kBACA,gBAEA,YACE,UACA,mBAIJ,YACE,wBACA,kBAIF,OACE,WACA,YACA,kBACA,UACA,QACA,eAGF,aACE,UACA,YACA,sBACA,kBAEA,sBACE,qBACA,wBAGF,sBACE,kBACA,MACA,SACA,qBACA,yBAKJ,UACE,aACA,kBAGF,sBACE,UACA,mBAGF,cACE,eACA,mBACA,gBACA,kBAGF,aACE,gBACA,gBAGF,eACE,mBACA,mBACA,mBACA,qBACA,gBACA","file":"modal.min.css"}
\ No newline at end of file
develop/.tmp/assets/styles/home.min.css.map
{"version":3,"sourceRoot":"","sources":["../../../src/assets/styles/home.min.scss","../../../src/assets/styles/utils/_mixins.scss","../../../src/assets/styles/utils/_variables.scss","../../../src/assets/styles/base/_base.scss"],"names":[],"mappings":"AAGQ,yFCFR,qCACE,QACE,yBAIJ,qCACE,QACE,yBARJ,qCACE,QACE,yBAIJ,qCACE,QACE,yBCEJ,MACE,wBACA,oBCTF,sFAKA,mBAGE,sBACA,mBACA,eAYF,KACE,iBACA,8BACA,wCAUF,KACE,SAOF,KACE,cAMF,qDASE,SAMF,kBAME,kBACA,oBACA,SAMF,MAEE,SACA,UACA,gBAMF,GACE,iBAGF,GACE,cAWF,GACE,uBACA,SACA,iBACA,qBACA,SACA,WACA,cAQF,IACE,gCACA,kBAGF,QACE,mBAUF,EACE,6BACA,qBACA,cAQF,YACE,iCAOF,SAEE,mBAQF,cAGE,gCACA,kBAOF,MACE,cAQF,QAEE,cACA,cACA,kBACA,wBAGF,IACE,eAGF,IACE,WAUF,4BAKE,sBAYF,sCAKE,wBACA,gBACA,sBACA,cACA,aACA,uBACA,UACA,SACA,gBACA,mBACA,uBAOF,gDAIE,eAGF,oFAIE,eAOF,gBACE,aAGF,gBACE,gBAOF,OACE,UAOF,SACE,SACA,UACA,YAGF,OACE,UAOF,SACE,wBAOF,SACE,cAOF,kFAEE,YAOF,cACE,oBAOF,yCACE,wBAQF,6BACE,0BACA,aAMF,cACE,0BAOF,WACE,eAUF,QACE,cAOF,QACE,kBAOF,wBACE,aAUF,MACE,qBACA,yBAGF,QACE,gBAGF,MAEE,mBACA,UAGF,GACE,gBACA,iBH3ZF,KACE,mBACA,sCAGF,SACE,kBACA,kBAGF,aACE,oBAGF,YACE,gBACA,8BACA,qBACA,kBACA,iBCgBA,qCDrBF,YAQI,kBAGF,oBACE,oBACA,gBAIJ,YACE,eACA,gBACA,kBACA,mBACA,oBAGF,WACE,YACA,gBACA,YACA,qBAGF,oBACE,gBACA,qBAGF,iBACE,aACA,8BACA,eACA,gCAEA,6BACE,cAIJ,kBACE,eACA,mBAGF,mBACE,eAGF,mBACE,eACA,kBACA,mBACA,2BACA,oBAGF,YACE,eACA,gBACA,mBACA,oBACA,gCAIA,kCACE,mBAIJ,YACE,eACA,gBACA,mBAGF,WACE,eACA,gBACA,qBAIA,wBACE,yBACA,6BAIJ,UACE,UACA,kBACA,2BACA,kBAGF,kBACE,UACA,mBACA","file":"home.min.css"}
\ No newline at end of file
{"version":3,"sourceRoot":"","sources":["../../../src/assets/styles/home.min.scss","../../../src/assets/styles/utils/_mixins.scss","../../../src/assets/styles/utils/_variables.scss","../../../src/assets/styles/base/_base.scss"],"names":[],"mappings":"AAGQ,yFCFR,qCACE,QACE,yBAIJ,qCACE,QACE,yBARJ,qCACE,QACE,yBAIJ,qCACE,QACE,yBCEJ,MACE,wBACA,oBCTF,sFAKA,mBAGE,sBACA,mBACA,eAYF,KACE,iBACA,8BACA,wCAUF,KACE,SAOF,KACE,cAMF,qDASE,SAMF,kBAME,kBACA,oBACA,SAMF,MAEE,SACA,UACA,gBAMF,GACE,iBAGF,GACE,cAWF,GACE,uBACA,SACA,iBACA,qBACA,SACA,WACA,cAQF,IACE,gCACA,kBAGF,QACE,mBAUF,EACE,6BACA,qBACA,cAQF,YACE,iCAOF,SAEE,mBAQF,cAGE,gCACA,kBAOF,MACE,cAQF,QAEE,cACA,cACA,kBACA,wBAGF,IACE,eAGF,IACE,WAUF,4BAKE,sBAYF,sCAKE,wBACA,gBACA,sBACA,cACA,aACA,uBACA,UACA,SACA,gBACA,mBACA,uBAOF,gDAIE,eAGF,oFAIE,eAOF,gBACE,aAGF,gBACE,gBAOF,OACE,UAOF,SACE,SACA,UACA,YAGF,OACE,UAOF,SACE,wBAOF,SACE,cAOF,kFAEE,YAOF,cACE,oBAOF,yCACE,wBAQF,6BACE,0BACA,aAMF,cACE,0BAOF,WACE,eAUF,QACE,cAOF,QACE,kBAOF,wBACE,aAUF,MACE,qBACA,yBAGF,QACE,gBAGF,MAEE,mBACA,UAGF,GACE,gBACA,iBH3ZF,KACE,mBACA,sCAGF,SACE,kBACA,kBAGF,aACE,oBAGF,YACE,gBACA,8BACA,qBACA,kBACA,iBCgBA,qCDrBF,YAQI,kBAGF,oBACE,oBACA,gBACA,kBACA,WAIJ,YACE,eACA,gBACA,kBACA,mBACA,oBAGF,WACE,YACA,gBACA,YACA,qBAGF,oBACE,gBACA,qBAGF,iBACE,aACA,8BACA,eACA,gCAEA,6BACE,cAIJ,kBACE,eACA,mBAGF,mBACE,eAGF,mBACE,eACA,kBACA,mBACA,2BACA,oBAGF,YACE,eACA,gBACA,mBACA,oBACA,gCAIA,kCACE,mBAIJ,YACE,eACA,gBACA,mBAGF,WACE,eACA,gBACA,qBAIA,wBACE,yBACA,6BAIJ,UACE,UACA,kBACA,2BACA,kBAGF,kBACE,UACA,mBACA","file":"home.min.css"}
\ No newline at end of file
develop/.tmp/index.html
......@@ -30,7 +30,8 @@
<div class="modal">
<div class="modalInner">
<h2 class="modal__title">吾輩は猫である</h2>
<p class="modal__text">吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p><a class="modal__button" href="">閉じる</a>
<p class="modal__text">吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p class="modal__button">閉じる</p>
<div class="close">
<div class="close__line --type01"></div>
<div class="close__line --type02"></div>
......@@ -40,7 +41,8 @@
<div class="modal">
<div class="modalInner">
<h2 class="modal__title">銀河鉄道の夜</h2>
<p class="modal__text">「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。</p><a class="modal__button" href="">閉じる</a>
<p class="modal__text">「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。</p>
<p class="modal__button">閉じる</p>
<div class="close">
<div class="close__line --type01"></div>
<div class="close__line --type02"></div>
......@@ -50,7 +52,8 @@
<div class="modal">
<div class="modalInner">
<h2 class="modal__title">風の歌を聴け</h2>
<p class="modal__text">「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。</p><a class="modal__button" href="">閉じる</a>
<p class="modal__text">「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。</p>
<p class="modal__button">閉じる</p>
<div class="close">
<div class="close__line --type01"></div>
<div class="close__line --type02"></div>
......
develop/src/assets/js/home.js
......@@ -46,6 +46,11 @@ class Home {
for (let i = 0; i < menus.length; i++) {
menus[i].addEventListener("click", menuClick, false);
}
const menus02 = document.getElementsByClassName("modal__button");
for (let i = 0; i < menus.length; i++) {
menus02[i].addEventListener("click", menuClick, false);
}
}
// フェードイン
......
develop/src/assets/styles/dist/modal.min.scss
......@@ -132,4 +132,5 @@ body.open {
border-radius: 50px;
display: inline-block;
margin-top: 35px;
cursor: pointer;
}
develop/src/assets/styles/home.min.scss
......@@ -31,6 +31,8 @@ body {
&.--music {
letter-spacing: 0.1em;
line-height: 1.4;
position: relative;
z-index: -1;
}
}
......
develop/src/html/index.pug
......@@ -8,7 +8,7 @@ block main
.modalInner
h2.modal__title 吾輩は猫である
p.modal__text 吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
a(href="").modal__button 閉じる
p.modal__button 閉じる
.close
.close__line.--type01
.close__line.--type02
......@@ -17,7 +17,7 @@ block main
.modalInner
h2.modal__title 銀河鉄道の夜
p.modal__text 「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。
a(href="").modal__button 閉じる
p.modal__button 閉じる
.close
.close__line.--type01
.close__line.--type02
......@@ -26,7 +26,7 @@ block main
.modalInner
h2.modal__title 風の歌を聴け
p.modal__text 「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。
a(href="").modal__button 閉じる
p.modal__button 閉じる
.close
.close__line.--type01
.close__line.--type02
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!