質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3906閲覧

jQueryでモーダルを表示した際の背景の色が変わる方法

lilbear

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/06/16 15:51

編集2019/06/17 01:43

引用テキストprogateの中で、モーダルを表示させる方法を学んでいる時に疑問に思ったことなのですが

![イメージ説明]
この状態のページから右上のログインをクリックし、モーダルを表示させようとした時、イメージ説明
このように背景も暗くなります。
イメージ説明
jQueryのコードはこのようになっています。

自分もこれと同じようにモーダルが表示されるとともに背景の色を暗くしたいと思っています。
クリックしてdisplay:none;としていた部分を表示するところまではできるのですが、同時に背景を暗くする方法がわかりません。アドバイスよろしくお願いします。
コードはこのようになっています

html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" type="text/css" 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 <header> 12 <div class="container"> 13 <div class="header-left"> 14 <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> 15 </div> 16 <div class="header-right" > 17 <!-- 以下の<div>タグにlogin-showというidをつけてください --> 18 <div class="login" id="login-show">ログイン</div> 19 20 </div> 21 </div> 22 </header> 23 <div class="signup-modal-wrapper"> 24 </div> 25 <!-- 「login-modal」というidを追加してください --> 26 <div class="login-modal-wrapper" id="login-modal"> 27 <!-- ログインのモーダル部分のHTMLを貼り付けてください --> 28 29 <div class="modal"> 30 <div id="login-form"> 31 <h2>Emailログイン</h2> 32 <form action="#"> 33 <input class="form-control" type="text" placeholder="メールアドレス"> 34 <input class="form-control" type="password" placeholder="パスワード"> 35 <div id="submit-btn">ログイン</div> 36 </form> 37 </div> 38 </div> 39 40 </div> 41 <div class="top-wrapper"> 42 <div class="container"> 43 <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1> 44 <p>progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 45 <div class="btn signup">新規登録はこちら</div> 46 <p>or</p> 47 <div class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</div> 48 <div class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</div> 49 </div> 50 </div> 51 <div class="lesson-wrapper"> 52 <div class="container"> 53 <div class="heading"> 54 <h2>Learn Where to Get Started!</h2> 55 </div> 56 <div class="lessons"> 57 </div> 58 </div> 59 </div> 60 <div class="faq-wrapper"> 61 <div class="container"> 62 <div class="heading"> 63 <h2>FAQ</h2> 64 </div> 65 <div class="faq"> 66 </div> 67 </div> 68 </div> 69 <div class="message-wrapper"> 70 <div class="container"> 71 <div class="heading"> 72 <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2> 73 <h3 id="tagline">Let's learn to code, learn to be creative!</h3> 74 </div> 75 <div class="btn message">さっそく開発する</div> 76 </div> 77 </div> 78 <footer> 79 <div class="container"> 80 <img src="https://prog-8.com/images/html/advanced/footer_logo.png"> 81 <p>Learn to Code,Learn to be Creative.</p> 82 </div> 83 </footer> 84 <script src="script.js"></script> 85</body> 86</html>

css

1body { 2 margin: 0; 3} 4 5a { 6 text-decoration: none; 7} 8 9.top-wrapper { 10 padding: 180px 0 100px 0; 11 background-image: url(https://prog-8.com/images/html/advanced/top.png); 12 background-size: cover; 13 color: white; 14 text-align: center; 15} 16 17.container { 18 width: 1170px; 19 padding: 0 15px; 20 margin: 0 auto; 21} 22 23.top-wrapper h1 { 24 opacity: 0.7; 25 font-size: 45px; 26 letter-spacing: 5px; 27} 28 29.top-wrapper p { 30 opacity: 0.7; 31 font-size: 14px; 32 margin-bottom: 35px; 33} 34 35.signup { 36 background-color: #239b76; 37} 38 39.facebook { 40 background-color: #3b5998; 41 margin-right: 10px; 42} 43 44.twitter { 45 background-color: #55acee; 46} 47 48.btn { 49 padding: 8px 24px; 50 color: white; 51 display: inline-block; 52 opacity: 0.8; 53 border-radius: 4px; 54 cursor: pointer; 55} 56 57.btn:hover { 58 opacity: 1; 59} 60 61.fa { 62 margin-right: 5px; 63} 64 65header { 66 height: 65px; 67 width: 100%; 68 background-color: rgba(34,49,52,0.9); 69 position :fixed; 70 top: 0; 71 z-index: 10; 72} 73 74.logo { 75 width: 124px; 76 margin-top: 20px; 77} 78 79.header-left { 80 float: left; 81} 82 83.header-right { 84 float: right; 85 background-color: rgba(255,255,255,0.3); 86 transition: all 0.5s; 87} 88 89.header-right:hover { 90 background-color: rgba(255,255,255,0.5); 91} 92 93.header-right .login { 94 line-height: 65px; 95 padding: 0 25px; 96 color: white; 97 cursor: pointer; 98 display: block; 99} 100 101/*モーダル*/ 102/* モーダル部分のCSSを貼り付けてください */ 103.login-modal-wrapper { 104 display: none; 105 position: fixed; 106 top: 0; 107 right: 0; 108 bottom: 0; 109 left: 0; 110 background-color: rgba(0, 0, 0, 0.5); 111 z-index: 100; 112 /* display: none;を追加してください */ 113 114} 115 116.modal { 117 position: absolute; 118 top: 20%; 119 left: 34%; 120 background-color: #e6ecf0; 121 padding: 20px 0 40px; 122 border-radius: 10px; 123 width: 450px; 124 height: auto; 125 text-align: center; 126} 127 128.fa-times { 129 position: absolute; 130 top: 12px; 131 right: 12px; 132 color: rgba(128, 128, 128, 0.46); 133 cursor: pointer; 134} 135 136#signup-form, #login-form { 137 width: 100%; 138} 139 140#signup-form h2, #login-form h2 { 141 color: #5f5d60; 142 letter-spacing: 1px; 143 margin-bottom: 40px; 144} 145 146#signup-form input, #login-form input { 147 width: 320px; 148 margin-bottom: 20px; 149 font-size: 12px; 150 padding: 12px 12px; 151 border: 1px solid #d0d5d8; 152 border-radius: 5px; 153} 154 155#submit-btn { 156 display: inline-block; 157 padding: 14px 140px; 158 background-color: #5dca88; 159 border: none; 160 border-radius: 3px; 161 color: white; 162 margin: 10px auto; 163 cursor: pointer; 164} 165 166 167 168.lesson-wrapper { 169 height: 500px; 170 padding-bottom: 80px; 171 background-color: #f7f7f7; 172 text-align: center; 173} 174 175.heading { 176 padding-top: 60px; 177 padding-bottom: 30px; 178 color: #5f5d60; 179} 180 181.heading h2 { 182 font-weight: normal; 183} 184 185/*faq wrapper*/ 186.faq-wrapper { 187 background-color: #e6ecf0; 188 text-align: center; 189 padding-bottom: 80px; 190 color: #5f5d60; 191} 192 193#faq-list { 194 width: 500px; 195 margin: 0 auto; 196 padding: 0; 197 list-style: none; 198} 199 200.message-wrapper { 201 border-bottom: 1px solid #eee; 202 padding-bottom: 80px; 203 text-align: center; 204} 205 206.message-wrapper .heading h3 { 207 font-weight: normal; 208} 209 210.message { 211 padding: 15px 40px; 212 background-color: #5dca88; 213 cursor: pointer; 214 box-shadow: 0px 7px #1a7940; 215} 216 217.message:active { 218 position: relative; 219 top: 7px; 220 box-shadow: none; 221} 222 223footer img { 224 width: 125px; 225} 226 227footer p { 228 color: #b3aeb5; 229 font-size: 12px; 230} 231 232footer { 233 padding-top: 30px; 234} 235

js

1$(function() { 2 // 「#login-show」要素に対するclickイベントを作成してください 3 $('#login-show').click(function(){ 4 $('#login-modal').fadeIn(); 5 }); 6 7});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/06/17 00:02

タイトルは「理由」を聞いていて内容は「方法」を聞いています。 どちらでしょうか。
lilbear

2019/06/17 01:12

方法です 修正しておきます
guest

回答3

0

はい出ました初心者に優しくないprogateさん。

jsを見ているようですが、場所が違うのではないでしょうか。

CSSに透明度や、背景色などを設定してはいませんかね。

jsのプラグインを入れる、といったような項目はなかったきがするので

見るとしたらCSSでしょうか。

jsだってjQueryだって勝手にやってくれてるわけじゃありません。

誰かがどこかに設定したからそう動いているんです。

誰かが、jsかCSSに背景を黒くする、と書いているからそうでています。


コメントを受けての追記

書いてるうちに解決したようですがせっかく書いたのでのせときます。

しかし何故このdisplay:none;となっているクラスがログインをクリックされたことで表示になるのかわかりません

コードを見ればすべて書いてあります。順番に見ていきます。

まずJSコードを見ましょう

JavaScript

1$('#login-modal').fadeIn();

ここでモーダルを表示してるのは見ればわかると思います。

$('#login-modal') この記述で、 どこを 表示したいのかを指定しています。

では #login-modal とはどこのことでしょう。

HTML

1 <!-- 「login-modal」というidを追加してください --> 2 <div class="login-modal-wrapper" id="login-modal"> ←ここに書いてある 3 <!-- ログインのモーダル部分のHTMLを貼り付けてください --> 4 5 <div class="modal"> 6 <div id="login-form"> 7 <h2>Emailログイン</h2> 8 <form action="#"> 9 <input class="form-control" type="text" placeholder="メールアドレス"> 10 <input class="form-control" type="password" placeholder="パスワード"> 11 <div id="submit-btn">ログイン</div> 12 </form> 13 </div> 14 </div> 15 16 </div>
<div>要素に id = "login-modal" としっかり書いてありますね。

#」 とは HTML要素の id属性のことを指しています。
オマケで「.」はclass属性です。

idが login-modal の要素を表示してね♡とJSで書いているので、
言われた通り忠実なJavaScriptくんは login-modalのdivを表示します。

ここで問題の背景色に関してですが、 id属性以外にも class属性がついている点に注目しましょう

HTML

1<div class="login-modal-wrapper" id="login-modal">

なにやら login-modal-wrapper というクラスがくっついていますね。

じゃあここでCSSをみます。

CSS

1.login-modal-wrapper { 2 display: none; 3 position: fixed; 4 top: 0; 5 right: 0; 6 bottom: 0; 7 left: 0; 8 background-color: rgba(0, 0, 0, 0.5); 9 z-index: 100; 10 /* display: none;を追加してください */ 11 12}

なんということでしょう。スタイルが設定されていますね。

CSSでdisplay:none;を追加したかと思いますが、

id = login-modal をfadeIn()すると、その同じdivに設定されている login-modal-wrapperクラスも fadeIn()されます。

なのでdisplay:none; はクリックするとdisplay:block;に変わります。

F12を押してデベロッパーツールを開いて確認してみるとわかりやすいのではないでしょーか。

このようにJSもCSSも命令されたことを従順に実行するだけの使いっ走りでしかありません。

絶対にどこかでそのように命令しているヤツがいます。

投稿2019/06/17 00:02

編集2019/06/17 02:04
azuapricot

総合スコア2341

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lilbear

2019/06/17 01:20

CSSでクリックアクションってできるんですか? CSSに何かあると思って探したのですがhoverやactiveしか見つからなかったです。
azuapricot

2019/06/17 01:34

クリックアクションができるわけじゃなくて、 クリックアクションはJSで制御してます。 クリックされたときにJSで黒い背景となるものを表示するようにしてあるはずなので、 CSSでbackgroundやopacityなどの記述が見当たらないか聞きました もしなければプラグインがはいっているんでしょう
azuapricot

2019/06/17 01:35

そもそもですが、提示するコードが少なすぎて推測しかできません。 タブにCSSなども表示されているので、JSだけじゃなくてCSSなども質問文に記載するのが普通ですよ
lilbear

2019/06/17 01:46

すいません修正しておきます。 CSSで背景を暗くする部分は見つけました。 .login-modal-wrapperというクラスのところだと思います。 しかし何故このdisplay:none;となっているクラスがログインをクリックされたことで表示になるのかわかりません
azuapricot

2019/06/17 01:53

回答に追記しますね
lilbear

2019/06/17 02:04

やっと理解できました。 .login-modal-wrapperと、login-modalは同じものを指しているんですね。 ご丁寧にアドバイスありがとうございました。
azuapricot

2019/06/17 02:06

同じものというわけではないですが、まぁ今回はたまたま同じdivを操作していた、というわけですね IDとClassの使い分けはJSを使う上で重要になってくるので必ず理解できるようにしましょう
lilbear

2019/06/17 02:08

ありがとうございます
lilbear

2019/06/17 02:10

コード乗せてくれてるの気づきませんでした。 こんなご丁寧にありがとうございます。 全部読み返してみます
guest

0

jsで処理するモーダルはウィンドウを開くのではなく
divやdialogで擬似的にモーダルっぽく処理をしているだけです
したがってモーダルの下のメイン画面にたいしてイベントが発生してしまうため
一枚シートを引いて透明度(opacity)を設定することにより

  • 直接メイン画面を触れないようにするかつ
  • メイン画面がアクティブではないように視覚的に表現する

を実現しているのだと思います

投稿2019/06/17 00:28

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lilbear

2019/06/17 02:12

アドバイスありがとうございます
guest

0

ベストアンサー

参考先があるのでしたらデベロッパーツールで確認してみれば見えてくると思うのですが大抵はwidth、height共にwindowなどに対して100%の要素をメイン部分とモーダルの間になるようにz-indexを調整して置いてるだけだと思います。

そもそもモーダルとは「他のすべての操作を一時的に奪う(無効にする)」ようにして出現させるのでそのように対応されています。

投稿2019/06/16 21:14

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lilbear

2019/06/17 01:32

ありがとうございます。 CSSの中にz-indexが設定されていてdisplay:none;となっており背景を暗くする働きのあるコードを見つけました。 しかしJSの中のクリックアクションでそのidは指定されていなく、何故クリックするとそのコードが表示されるのかわかりません。
m.ts10806

2019/06/17 01:35

こちらで確認できる手段が提示されていない以上、なんとも言えませんが、何かしら連動して動くようにはなっているはずです。display:noneになっているならshow()かfadeIn()か、いずれかの手段で表示状態に切り替えているはずなので。
lilbear

2019/06/17 01:48

表示不足でした。すいません。 HTML、CSS、javascriptのコードを貼り直したのでよろしくお願いします。
m.ts10806

2019/06/17 01:52

.login-modal-wrapperが背景でその中にある.modalが本体 ラッパーをfadeInすることでどちらも表示になっています。
lilbear

2019/06/17 02:02

理解できました。 同じまとまりのコードですがclassとidで指定の仕方が違かったということですね。 ありがとうございました。
m.ts10806

2019/06/17 02:04

というより、下記のようになっていたら子・孫まで全部同じくdisplay:noneなので <div style="display:none"> <div></div> </div> それを親を「表示」に切り替えることで子・孫まで全部「表示」となるだけですね。
lilbear

2019/06/17 02:09

わかりました ご丁寧なアドバイスありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問