引用テキスト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});
回答3件
あなたの回答
tips
プレビュー