LEARN TO CODE.
\r\n LEARN TO BE CREATIVE.

progateはオンラインプログラミング学習サービスです。
\r\n 初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。

\r\n

新規登録はこちら

\r\n

Facebookで登録
Twitterで登録

\r\n

開いたモーダルを.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&amp;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

m.ts10806

2020/05/15 14:03

HTMLが正しくないです。<div></div>の組みが合ってないようですね。これではJavaScriptも正しく動作させられないのでは。直接関係なくても後々必ず響いてきますし、もし一部だけの提示なら、その旨あったほうがいいし、にしても構文NGなコードを提示するのは横暴です。手元にあるコードに構文ミスないならそのまま提示するか、きちんと組み直してください

dorachan1293

2020/05/16 02:24

全コード提示致しました。

行動規範の内容に同意します

回答2件

こういうときはデベロッパツールで要素を検証します。

×のところを選ぼうとするとpが選択されます。
つまり目には見えないけど被ってるということも言えます。
opacity: 0.9;を削除すると×も選択できるようになり、クリックも効くようになりました。

あとは要件次第で工夫してみてください。

以下、修正前のコードに対する回答

提示のままのコードだと×は表示されないし、赤い枠のところがそれなら左上ではなく右上ですが

ちょっとマウスポインターの反応範囲狭いですが、ちゃんとクリックできるし、fadeOutが効いて閉じるようになってますよ。（HTMLの構文ミスを直さなくてもちゃんと閉じます）

投稿2020/05/15 14:12

編集2020/05/16 04:50

m.ts10806

総合スコア80890

dorachan1293

2020/05/15 14:48

ありがとうございます。ブラウザではなく、Progateのプレビュー画面で確認しているので不具合があったのかもしれません。一度自分でもきちんと確認してみます。ご丁寧にありがとうございました！

m.ts10806

2020/05/15 21:14

環境とか含めて前程すべて書いてないと分かりません。全ての人がProgate使うわけではないです。解決済みはいいのですけど、確認してからにしてください。この質問をあとから見た時に、結局どう解決したのか分からないですよ。

dorachan1293

2020/05/16 02:26

ブラウザで確認したところ、やはりモーダルが閉じませんでした。全てのソースコードを掲載しましたので、もしお分かりになれば教えていただけますでしょうか。情報不足と確認不足、申し訳ございませんでした。

m.ts10806

2020/05/16 04:25

BootStrap入れてて自前でモーダルは、どういう理由でしょう

m.ts10806

2020/05/16 04:34

すみません勘違いでした。fontawesomeでしたね

m.ts10806

2020/05/16 04:38

ただ >.close-btnで閉じたいから変わってますね。コードが。そこまで変わるとさすがに私の回答が「ないコードに対する回答」になってしまっています。

dorachan1293

2020/05/16 07:04 編集

ありがとうございます。 pが被ってしまっているというのは理解できました。ですが、なぜ.top-wrapperのpに対するopacity: 0.9;を削除すると✕が有効になるのかがよくわかりません。

m.ts10806

2020/05/16 07:02

.top-wrapper , h1 , p { color: white; opacity: 0.9;　　←ここ } ひとまず削除で。 .top-wrapper , h1 , p { color: white; }

dorachan1293

2020/05/16 07:05

すみません、回答をいただく前にコメントを修正してしまいました。なぜこの部分のopacityと✕部分が関係しているのでしょうか？？

m.ts10806

2020/05/16 07:20 編集

デベロッパツールで調整した結果分かったことではありますが、調べたところ、opacityを1未満にすると重なり（index）が変化することがあるようです。 https://hail2u.net/blog/webdesign/opacity-and-z-index.html

dorachan1293

2020/05/16 07:55

ありがとうございます。ただ、この方法だとtop-wrapperのpにopacityを効かせたいときに解決ができないですよね …。でも解決策のヒントが得られました！いろいろやってみたいと思います。コードは質問と回答に合うよう修正しました。この度は本当にありがとうございました。

m.ts10806

2020/05/16 08:10

z-indexで調整してみては

m.ts10806

2020/05/16 08:12 編集

あと .top-wrapper , h1 , p この指定の仕方だと「top-wrapperのp」になってません。それぞれに効いてます。「.top-wrapperのp」であれば .top-wrapper p のようにする必要があります。

行動規範の内容に同意します

とりあえず、signup-btnクラスとsign-upクラスがごっちゃで
閉じる前に開けないのでは？

投稿2020/05/15 10:58

yambejp

総合スコア118164

dorachan1293

2020/05/15 11:05

ありがとうございます。開けてはいるので、閉じるための回答を募集しています。

yambejp

2020/05/15 11:13 編集

では開けられるソースを提示してください命題のソースは質問とかみあっていません

dorachan1293

2020/05/15 11:17

追記しました。よろしくお願い致します。

yambejp

2020/05/15 11:21

「新規登録はこちら」でモーダルがでるのですね「新規登録」ボタンはsubmitなので、押せば確実にモーダルは消えます（ページが遷移するので）

dorachan1293

2020/05/15 11:24

ありがとうございます。できれば、左上の✕でモーダルを消す方法を知りたいのですが、もしお分かりになれば教えていただけるとありがたいです。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

LEARN TO CODE.
\r\n LEARN TO BE CREATIVE.

HTML&CSS

jQuery

Ruby

PHP

FAQ

さぁ、あなたもProgateでプログラミングを学んでみませんか？

開いたモーダルが閉じない

以下、修正前のコードに対する回答

関連した質問

LEARN TO CODE.\r\n LEARN TO BE CREATIVE.

HTML&CSS

jQuery

Ruby

PHP

FAQ

さぁ、あなたもProgateでプログラミングを学んでみませんか？

以下、修正前のコードに対する回答

関連した質問

LEARN TO CODE.
\r\n LEARN TO BE CREATIVE.