Q&A
HTMLが正しくないです。<div></div>の組みが合ってないようですね。
これではJavaScriptも正しく動作させられないのでは。
直接関係なくても後々必ず響いてきますし、もし一部だけの提示なら、その旨あったほうがいいし、にしても構文NGなコードを提示するのは横暴です。
手元にあるコードに構文ミスないならそのまま提示するか、きちんと組み直してください
開いたモーダルを.close-btnで閉じたいのですが、反応しません。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 9</head> 10<body> 11 <div class="background-img"> 12 <header> 13 <div class="container"> 14 <div class="header-wrapper"> 15 <div class="header-left"> 16 <img src="https://prog-8.com/images/html/advanced/main_logo.png"> 17 </div> 18 <div class="header-right"> 19 <div class="login-btn"><a href="">ログイン</a></div> 20 </div> 21 </div> 22 </div> 23 </header> 24 25 <div class="top-wrapper"> 26 <div class="container"> 27 <h1>LEARN TO CODE.<br> 28 LEARN TO BE CREATIVE.</h1> 29 <p>progateはオンラインプログラミング学習サービスです。<br> 30 初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 31 <div class="btn-wrapper"> 32 <div class="btn new signup-btn">新規登録はこちら</div> 33 <p>or</p> 34 <ul class="ft-btn-wrapper"> 35 <li class="btn facebook">Facebookで登録</li> 36 <li class="btn twitter">Twitterで登録</li> 37 </ul> 38 </div> 39 </div> 40 </div> 41 </div> 42 43 <div class="lesson-wrapper"> 44 <div class="container"> 45 <p class="start-lesson">Learn Where to Get Started!</p> 46 47 <div class="lessons"> 48 <div class="lesson"> 49 <div class="icon"> 50 <img src="https://prog-8.com/images/html/advanced/html.png"> 51 </div> 52 <h2>HTML&CSS</h2> 53 <div class="text-contents"> 54 <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 55 </div> 56 </div> 57 <div class="lesson"> 58 <div class="icon"> 59 <img src="https://prog-8.com/images/html/advanced/jQuery.png"> 60 </div> 61 <h2>jQuery</h2> 62 <div class="text-contents"> 63 <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p> 64 </div> 65 </div> 66 <div class="lesson"> 67 <div class="icon"> 68 <img src="https://prog-8.com/images/html/advanced/ruby.png"> 69 </div> 70 <h2>Ruby</h2> 71 <div class="text-contents"> 72 <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 73 </div> 74 </div> 75 <div class="lesson"> 76 <div class="icon"> 77 <img src="https://prog-8.com/images/html/advanced/php.png"> 78 </div> 79 <h2>PHP</h2> 80 <div class="text-contents"> 81 <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> 82 </div> 83 </div> 84 </div> 85 86 </div> 87 </div> 88 89 <div class="faq-wrapper"> 90 <div class="container"> 91 <h3>FAQ</h3> 92 <div class="faq"> 93 <ul> 94 <li class="faq-list">Progateのキャラクターはなんですか？<span>+</span> 95 <p class="answer">にんじゃわんこといいます。忍者の恰好をしたわんこです。ネコではありません。</p></li> 96 <li class="faq-list">にんじゃわんこメスですか？それともオスですか？<span>+</span> 97 <p class="answer">にんじゃわんこはオスです。</p></li> 98 <li class="faq-list">にんじゃわんこは何歳ですか？<span>+</span> 99 <p class="answer">にんじゃわんこは14歳です。</p></li> 100 </ul> 101 </div> 102 </div> 103 </div> 104 105 <div class="message-wrapper"> 106 <div class="container"> 107 <h4>さぁ、あなたもProgateでプログラミングを学んでみませんか？</h4> 108 <p>Let's learn to code, leran to be creative!</p> 109 <div class="btn start signup-btn">さっそく開発する</div> 110 </div> 111 </div> 112 113 114 <footer> 115 <div class="container"> 116 <img src="https://prog-8.com/images/html/advanced/footer_logo.png"> 117 <p>Learn to Code, Learn to be Creative.</p> 118 </div> 119 </footer> 120 121 <div class="modal-wrapper"> 122 <div class="modal"> 123 <div class="close-btn"> 124 <span class="fa fa-times"></span> 125 </div> 126 127 <div class="sign-up"> 128 <p>Emailで新規登録</p> 129 <form> 130 <input type="text" placeholder="メールアドレス"> 131 <input type="text" placeholder="パスワード"> 132 <input class="submit" type="submit" value="新規登録"> 133 </form> 134 </div> 135 </div> 136 </div> 137 138 <script src="script.js"></script> 139</body> 140</html> 141
CSS
1 2body { 3 margin: 0; 4} 5 6a { 7 text-decoration: none; 8} 9 10li { 11 list-style: none; 12} 13 14p { 15 margin: 0; 16} 17 18.container { 19 max-width: 1000px; 20 margin:0 auto; 21} 22 23.background-img { 24 background-image:url("https://prog-8.com/images/html/advanced/top.png"); 25 background-size: cover; 26} 27 28/*headerここから*/ 29 30header { 31 background: #253339; 32 opacity: 0.9; 33 position: fixed; 34 z-index: 1; 35 width: 100%; 36} 37 38.header-left { 39 height: 60px; 40} 41 42.header-right { 43 background: rgb(105,117,120); 44 line-height: 60px; 45 width: 100px; 46 text-align: center; 47} 48 49.header-wrapper { 50 display: flex; 51 justify-content: space-between; 52} 53 54.login-btn > a { 55 color: white; 56 display: block; 57} 58 59.header-left img { 60 width: 120px; 61 margin: 20px 0; 62} 63 64/*top-wrapperここから*/ 65 66.top-wrapper , h1 , p { 67 color: white; 68 opacity: 0.9; 69} 70 71.top-wrapper h1 { 72 letter-spacing: 5px; 73 font-size: 35px; 74 padding: 120px 0 30px 0; 75 margin-top: 0; 76} 77 78.top-wrapper , p { 79 font-size: 14px; 80} 81 82.top-wrapper { 83 text-align: center; 84} 85 86.btn-wrapper { 87 padding: 30px 0 100px 0; 88} 89 90.ft-btn-wrapper { 91 padding-left: 0; 92 padding-right: 20px; 93} 94 95.ft-btn-wrapper li { 96 display: inline-block; 97} 98 99.btn { 100 background: pink; 101 padding: 0 15px; 102 line-height: 35px; 103 border-radius: 5px; 104 opacity: 0.7; 105 display: inline-block; 106} 107 108.btn:hover { 109 opacity: 1.0; 110 cursor: pointer; 111} 112 113 114.twitter { 115 margin-left: 15px; 116 background: #00bfff; 117} 118 119.facebook { 120 background: #4169e1; 121} 122.new { 123 background:#3cb371; 124} 125 126 127/*lesson-wrapperここから*/ 128 129.start-lesson p { 130 color: #5F5D60; 131} 132 133.lesson-wrapper { 134 background: #F7F7F7; 135 height: 500px; 136 padding-bottom: 80px; 137} 138 139.lessons { 140 display: flex; 141 justify-content: space-between; 142 padding-bottom: 60px; 143} 144 145.lesson { 146 width: 25%; 147 text-align: center; 148 position: relative; 149} 150 151 152.text-contents { 153 width: 80%; 154 padding-top: 30px; 155 margin: 0 auto; 156 display: none; 157} 158 159.start-lesson { 160 font-size: 30px; 161 margin: 0 auto; 162 padding: 40px 0; 163 text-align: center; 164 letter-spacing: 1px; 165} 166 167.lesson-wrapper p { 168 color: #5F5D60; 169} 170 171h2 { 172 font-size: 16px; 173 font-weight: normal; 174 color: white; 175 width: 100%; 176 position: absolute; 177 top: 70px; 178} 179 180.faq-wrapper { 181 background: #E6ECF0; 182 text-align: center; 183} 184 185.faq-wrapper { 186 color: #5F5D60; 187} 188 189h3 { 190 font-size: 20px; 191 font-weight: normal; 192 margin-top: 0; 193 padding: 20px 0 40px 0; 194} 195 196.faq { 197 width: 650px; 198 margin: 0 auto; 199 padding-bottom: 30px; 200} 201 202li { 203 text-align: left; 204} 205 206span { 207 float: right; 208 color: #D4D6D8; 209} 210 211.faq-list { 212 font-size: 14px; 213 font-weight: bold; 214 padding: 20px 0; 215 border-bottom: 1px solid #D4D6D8; 216} 217 218.faq-list:hover { 219 cursor: pointer; 220} 221 222.answer { 223 color: #5F5D60; 224 font-size: 12px; 225 padding: 30px 0 10px 0; 226 display: none; 227} 228 229 230/*message.wrapperここから*/ 231 232.message-wrapper { 233 text-align: center; 234 padding-bottom: 30px; 235} 236 237h4 { 238 font-size: 20px; 239 font-weight: normal; 240 color: #5F5D60; 241} 242 243.message-wrapper p { 244 color: #5F5D60; 245} 246 247.start { 248 background: #5DCA88; 249 color: white; 250 margin: 30px 0; 251 padding: 10px 20px; 252 box-shadow: 0 5px 0 rgb(26,121,64); 253} 254 255.start:active { 256 position: relative; 257 top: 5px; 258 box-shadow: none; 259} 260 261/*footerここから*/ 262 263footer { 264 padding: 30px 0; 265 border-top: 1px solid #D4D6D8; 266} 267 268footer p { 269 color: #B3AEB5; 270} 271 272footer img { 273 width: 140px; 274} 275 276/*modalここから*/ 277 278.modal-wrapper { 279 background: rgba(0, 0, 0, 0.6); 280 position: fixed; 281 top: 0; 282 right: 0; 283 bottom: 0; 284 left: 0; 285 z-index: 100; 286 display: none; 287 288} 289 290.modal { 291 background: #E6ECF0; 292 width: 330px; 293 position: absolute; 294 top: 30%; 295 left: 40%; 296 border-radius: 8px; 297} 298 299.sign-up { 300 text-align: center; 301} 302 303 304.fa { 305 font-size: 15px; 306 padding: 10px 10px 0 0; 307} 308 309.close-btn:hover { 310 cursor: pointer; 311} 312 313.sign-up > p { 314 font-size: 18px; 315 color: #5F5D60; 316 font-weight: bold; 317 padding: 30px 0; 318} 319 320input { 321 border-radius: 2px; 322 margin-bottom: 30px; 323 border: 1px solid rgb(212,214,216); 324 padding: 10px 0 10px 10px; 325 width: 230px; 326} 327 328.submit { 329 background: #3cb371; 330 color: white; 331 margin-bottom: 30px; 332} 333 334::place-holder { 335 color: #5F5D60; 336 font-size: 10px; 337}
jQuery
1 2$(function() { 3 4 $('.signup-btn').click(function (){ 5 $('.modal-wrapper').fadeIn(); 6 }); 7 8 $('.close-btn').click(function (){ 9 $('.modal-wrapper').fadeOut(); 10 }); 11 12 13$('.lesson').hover( 14 function (){ 15 $(this).find('.text-contents').fadeIn(); 16 } , 17 function(){ 18 $(this).find('.text-contents').fadeOut(); 19 }); 20 21 22 $('.faq-list').click(function (){ 23 var $answer = $(this).find('.answer') 24 25 if ($answer.hasClass('open')) { 26 $answer.removeClass('open'); 27 $answer.slideUp(); 28 $(this).find('span').text('+'); 29 30 } else { 31 $answer.addClass('open') 32 $answer.slideDown(); 33 $(this).find('span').text('-'); 34 }; 35 36 37}); 38 39 40 41}); 42
回答2件
0
こういうときはデベロッパツールで要素を検証します。
×のところを選ぼうとするとpが選択されます。
つまり目には見えないけど被ってるということも言えます。
opacity: 0.9;を削除すると×も選択できるようになり、クリックも効くようになりました。
あとは要件次第で工夫してみてください。
以下、修正前のコードに対する回答
提示のままのコードだと×は表示されないし、赤い枠のところがそれなら左上ではなく右上ですが
ちょっとマウスポインターの反応範囲狭いですが、ちゃんとクリックできるし、fadeOutが効いて閉じるようになってますよ。（HTMLの構文ミスを直さなくてもちゃんと閉じます）
投稿2020/05/15 14:12
編集2020/05/16 04:50総合スコア80850
ありがとうございます。
ブラウザではなく、Progateのプレビュー画面で確認しているので不具合があったのかもしれません。
一度自分でもきちんと確認してみます。
ご丁寧にありがとうございました！
環境とか含めて前程すべて書いてないと分かりません。全ての人がProgate使うわけではないです。
解決済みはいいのですけど、確認してからにしてください。
この質問をあとから見た時に、結局どう解決したのか分からないですよ。
ブラウザで確認したところ、やはりモーダルが閉じませんでした。
全てのソースコードを掲載しましたので、もしお分かりになれば教えていただけますでしょうか。
情報不足と確認不足、申し訳ございませんでした。
BootStrap入れてて自前でモーダルは、どういう理由でしょう
すみません勘違いでした。fontawesomeでしたね
ただ
>.close-btnで閉じたい
から変わってますね。コードが。
そこまで変わるとさすがに私の回答が「ないコードに対する回答」になってしまっています。
ありがとうございます。
pが被ってしまっているというのは理解できました。
ですが、なぜ.top-wrapperのpに対するopacity: 0.9;を削除すると✕が有効になるのかがよくわかりません。
.top-wrapper , h1 , p {
color: white;
opacity: 0.9; ←ここ
}
ひとまず削除で。
.top-wrapper , h1 , p {
color: white;
}
すみません、回答をいただく前にコメントを修正してしまいました。
なぜこの部分のopacityと✕部分が関係しているのでしょうか？？
デベロッパツールで調整した結果分かったことではありますが、
調べたところ、opacityを1未満にすると重なり（index）が変化することがあるようです。
https://hail2u.net/blog/webdesign/opacity-and-z-index.html
ありがとうございます。
ただ、この方法だとtop-wrapperのpにopacityを効かせたいときに解決ができないですよね …。
でも解決策のヒントが得られました！いろいろやってみたいと思います。
コードは質問と回答に合うよう修正しました。
この度は本当にありがとうございました。
z-indexで調整してみては
あと
.top-wrapper , h1 , p
この指定の仕方だと「top-wrapperのp」になってません。
それぞれに効いてます。
「.top-wrapperのp」であれば
.top-wrapper p
のようにする必要があります。
0
とりあえず、signup-btnクラスとsign-upクラスがごっちゃで
閉じる前に開けないのでは？
投稿2020/05/15 10:58
総合スコア114843
ありがとうございます。
開けてはいるので、閉じるための回答を募集しています。
では開けられるソースを提示してください
命題のソースは質問とかみあっていません
追記しました。
よろしくお願い致します。
「新規登録はこちら」でモーダルがでるのですね
「新規登録」ボタンはsubmitなので、押せば確実にモーダルは消えます
（ページが遷移するので）
ありがとうございます。
できれば、左上の✕でモーダルを消す方法を知りたいのですが、もしお分かりになれば教えていただけるとありがたいです。
あなたの回答
tips
プレビュー
