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

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

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

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

MongoDB

MongoDBはオープンソースのドキュメント指向データベースの1つです。高性能で、多くのリトルエンディアンシステムを利用することができます。

JavaScript

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

HTML

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

CSS

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

Q&A

1回答

2175閲覧

モーダルウィンドウでデータの引き渡しをしたいです。

meitantei

総合スコア10

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

MongoDB

MongoDBはオープンソースのドキュメント指向データベースの1つです。高性能で、多くのリトルエンディアンシステムを利用することができます。

JavaScript

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/07/30 04:16

編集2022/01/12 10:55

特定のラベルをクリックして、モーダルウィンドウを開きたいのですが、そのときラベルが持っているデータと開くモーダルウィンドウのデータの紐付けの仕方が分かりません。
データは、mongoDBから引っ張ってきています。

pug

1 2 3 4html 5 link(rel="stylesheet" type="text/css" href="stylesheets/tesss.css") 6 body 7 .accbox 8 div(style="position:absolute; top:87px; left:30px") 9 // ラベル1 10 label(for="label5") 一覧 11 input#label5.cssacc(type="checkbox") 12 .accshow 13 p 14 |15 a(href="#open01") A 16 br 17 #modal 18 #open01 19 a.close_overlay(href="#") × 20 .modal_window 21 h2 A 22 each emp in employees 23 div(style="position:absolute; top:80px; left:50px") 24 a(href="#popen01") 25 img(src="tarou.jpg" width="80" height="90" alt="") 26 br 27 a(href="#popen01") 28 td #{emp.sei1} 29 td #{emp.mei1} 30 br 31 div(style="position:absolute; top:500px; left:330px") 32 a(href="#") 【×】CLOSE 33 #popen01 34 a.close_overlay(href="#") × 35 .modal_window 36 div(style="position:absolute; top:0px; left:0px") 37 h2 tarou tanaka 38 div(style="position:absolute; top:80px; left:100px") 39 img(src="tarou.jpg" width="200" height="230" alt="") 40 br 41 div(style="position:absolute; top:80px; left:350px") 42 table 43 tr 44 th 名前(フリガナ) 45 td タナカ タロウ 46 tr 47 th 名前 48 td 田中太郎 49 tr 50 th 電話番号 51 td 000-000-000 52 div(style="position:absolute; top:356px; left:50px") 53 table.mail 54 tr 55 th メールアドレス1 56 td docomo 57 div(style="position:absolute; top:500px; left:330px") 58 a(href="#") 【×】CLOSE

css

1/*ボックス全体*/ 2.accbox { 3 margin: 2em 0; 4 padding: 0; 5 max-width: 400px;/*最大幅*/ 6} 7 8 9 h1 { 10 color: white; 11 line-height: 120%; 12 margin: 0 auto 2rem auto; 13 max-width: 30rem; 14 } 15 16 17 18/*ラベル*/ 19.accbox label { 20 display: block; 21 margin: 1.5px 0; 22 padding : 11px 12px; 23 color :#2f8fcf; 24 font-weight: bold; 25 background :#a4cbf3; 26 cursor :pointer; 27 transition: all 0.5s; 28 height:500px; 29} 30 31/*ラベルホバー時*/ 32.accbox label:hover { 33 background :#85baef; 34} 35 36/*チェックは隠す*/ 37.accbox input { 38 display: none; 39} 40 41/*中身を非表示にしておく*/ 42.accbox .accshow { 43 height: 0; 44 padding: 0; 45 overflow: hidden; 46 opacity: 0; 47 transition: 0.8s; 48} 49 50/*クリックで中身表示*/ 51.cssacc:hover + .accshow 52,.accshow:hover 53 { 54 height: auto; 55 padding: 5px; 56 background: #eaeaea; 57 opacity: 1; 58} 59/*ここから変更*/ 60.accbox2 label { 61 display: block; 62 margin: 1.5px 0; 63 padding : 11px 12px; 64 color :#2f8fcf; 65 font-weight: bold; 66 background :#a4cbf3; 67 cursor :pointer; 68 transition: all 0.5s; 69 height:10px; 70} 71 72/*ラベルホバー時*/ 73.accbox2 label:hover { 74 background :#85baef; 75} 76 77/*チェックは隠す*/ 78.accbox2 input { 79 display: none; 80} 81 82/*中身を非表示にしておく*/ 83.accbox2 .accshow { 84 height: 0; 85 padding: 0; 86 overflow: hidden; 87 opacity: 0; 88 transition: 0.8s; 89} 90 91/*クリックで中身表示*/ 92.cssacc:hover + .accshow 93,.accshow:hover 94 { 95 height: auto; 96 padding: 5px; 97 background: #eaeaea; 98 opacity: 1; 99} 100/*多分ここまで*/ 101 102/* ContentsArea 103-------------------------- */ 104#contents { 105 margin: 0 auto; 106 padding: 10px 0 50px 0; 107 width: 100%; 108} 109 110p { 111 padding: 10px 0; 112} 113 114 115#open01, 116#open02 { 117 top: 0; 118 left: 0; 119 width: 100%; 120 height: 100%; 121 display: none; 122 position: absolute; 123} 124 125#popen01 { 126 top: 0; 127 left: 0; 128 width: 100%; 129 height: 100%; 130 display: none; 131 position: absolute; 132} 133 134.close_overlay { 135 top: 0; 136 left: 0; 137 width: 100%; 138 height: 100%; 139 display: block; 140 text-indent: -9999px; 141 position: absolute; 142 background: #000; 143 opacity: 0.5; 144 z-index: 5; 145} 146 147.modal_window { 148 top: 50%; 149 left: 50%; 150 margin: -300px 0 0 -300px; 151 width: 800px; 152 height: 600px; 153 text-align: center; 154 display: block; 155 background: #fff; 156 position: absolute; 157 z-index: 10; 158} 159 160.modal_window h2 { 161 margin-bottom: 50px; 162 width: 400px; 163 height: 50px; 164 line-height: 50px; 165 color: #fff; 166 font-size: 24px; 167 font-weight: bold; 168 text-align: left; 169 text-indent: 15px; 170 background: rgb(240, 93, 196); 171} 172 173 174.modal_window p { 175 padding: 0 15px 15px 15px; 176 font-size: 20px; 177 line-height: 160%; 178 text-align: left; 179} 180 181 182table{ 183 width: 100%; 184 border-collapse: collapse; 185 } 186 187 table tr{ 188 border-bottom: solid 2px white; 189 } 190 191 table tr:last-child{ 192 border-bottom: none; 193 } 194 195 table th{ 196 position: relative; 197 text-align: left; 198 width: 30%; 199 background-color: #52c2d0; 200 color: white; 201 text-align: center; 202 padding: 10px 0; 203 } 204 205 table th:after{ 206 display: block; 207 content: ""; 208 width: 0px; 209 height: 0px; 210 position: absolute; 211 top:calc(50% - 10px); 212 right:-10px; 213 border-left: 10px solid #52c2d0; 214 border-top: 10px solid transparent; 215 border-bottom: 10px solid transparent; 216 } 217 218 table td{ 219 text-align: left; 220 width: 90%; 221 text-align: center; 222 background-color: #eee; 223 padding: 10px 0; 224 } 225 226 227 table.mail{ 228 width: 156.6%; 229 border-collapse: collapse; 230 } 231 232 table.mail tr{ 233 border-bottom: solid 2px white; 234 } 235 236 table.mail tr:last-child{ 237 border-bottom: none; 238 } 239 240 table.mail th{ 241 position: relative; 242 text-align: left; 243 width: 30%; 244 background-color: #52c2d0; 245 color: white; 246 text-align: center; 247 padding: 10px 0; 248 } 249 250 table.mail th:after{ 251 display: block; 252 content: ""; 253 width: 0px; 254 height: 0px; 255 position: absolute; 256 top:calc(50% - 10px); 257 right:-10px; 258 border-left: 10px solid #52c2d0; 259 border-top: 10px solid transparent; 260 border-bottom: 10px solid transparent; 261 } 262 263 table.mail td{ 264 text-align: left; 265 width: 90%; 266 text-align: center; 267 background-color: #eee; 268 padding: 10px 0; 269 } 270 271/* CSS3 ModalWindow SET 272-------------------------- */ 273@-webkit-keyframes modalFadeIn { 274 0% {opacity:0;display:block;} 275 100% {opacity:1;} 276} 277 278div#modal div:target { 279 -webkit-animation-name: modalFadeIn; 280 -webkit-animation-duration: 1s; 281 -webkit-animation-iteration-count: 1; 282 opacity: 1; 283 display:block; 284}

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

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

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

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

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

og24715

2019/07/30 04:23

目的を達成するために何を試されましたか。
meitantei

2019/07/30 05:21

データの紐付けの仕方が全くと言っていいほど分からなかったので、プルダウンの要領で、田中太郎のラベルをクリックしたら隠されている要素を表示するようにしていました。 しかし、綺麗に表示することができなかったので、このやり方でトライしようと考えました。
guest

回答1

0

data属性に入れておいて渡すとか。

投稿2019/07/30 04:48

m.ts10806

総合スコア80765

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

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

meitantei

2019/07/30 05:25

それはどのようにすれば良いのでしょうか? 調べてみたのですが、いまいちどうすれば良いか分かりません。 詳しく教えていただけたらありがたいです。
m.ts10806

2019/07/30 05:34

要は「クリックしたラベルを持ってきたい」ということですよね。 まずは最小構成で組むと良いです。 PugもmongoDBも使ったことはないですが、ほぼHTMLとJavaScript(簡単に書きたいならjQuery)で済みます。 ・対象のラベルにdata属性を入れてデータはDBから持ってきた情報を入れておく ・ラベルクリック→クリックイベントのthisで「自身の」data属性のデータを取得 ・モーダルオープン 取得したdata属性のデータをモーダルに配置
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問