Q&A
Colorboxでモーダルウィンドウを作ろうとしたのですがうまくいきません。
■やりたいこと
テキストを複数並べて、テスト1を押した時は1の内容を、テスト2の時は2の内容のテキストボックスが出るようなモーダルウィンドウを作りたいと思っています。
以下がやりたいことの参考画像です。
参考にした記事
https://www.plusdesign.co.jp/blog/?p=3690
上記の記事を参考に以下のコードを設置しました。
html
1<head> 2<script> 3 $(function() { 4 $(".inline_box").colorbox({ 5 inline: true, 6 }); 7 }); 8 </script> 9</head> 10 11<a href="#inline_content" class="inline_box"> 12 <p>テスト1</p> 13</a> 14<div style="display:none"> 15 <div id="inline_content"> 16 <p>テスト1のテキストボックスが開く</p> 17 </div> 18</div> 19<a href="#inline_content" class="inline_box"> 20 <p>テスト2</p> 21</a> 22<div style="display:none"> 23 <div id="inline_content"> 24 <p>テスト2のテキストボックスが開く</p> 25 </div> 26</div> 27<a href="#inline_content" class="inline_box"> 28 <p>テスト3</p> 29</a> 30<div style="display:none"> 31 <div id="inline_content"> 32 <p>テスト3のテキストボックスが開く</p> 33 </div> 34</div>
テスト2・テスト3をクリックしても、テスト1の内容が出てきてしまいます。
JavaScriptを書いたり、仕組みを理解できておらず、テスト1の記述をそのまま繰り返してしまっています。
複数の項目を並べてそれぞれモーダルウィンドウを表示できるようにするにはどのようにすれば良いのでしょうか？
初心者の質問で申し訳ありませんが、ご教示いただけると助かります。
よろしくお願いいたします。
回答1件
0
ベストアンサー
HTML内のidは重複できません。
なので、inline_content1 inline_content2 のように変更しましょう。
投稿2018/12/17 16:15
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/18 11:19