前提
質問させていただきます。
モーダルウィンドウ(idはmodal1)上に置いたaタグをクリックされたら違うモーダルウィンドウ(idはmodal2)へ遷移させたいです。(もしくは1を閉じて2を表示)
現状ではmodal1ウィンドウからボタンを押すと、modal2は開きましたがmodal1ウィンドウが後ろに表示されています(2画面重なっている状態、1が後ろ2が前)。
あともう少しなんですが…
hideでは非表示になるのでは・・・?
どこか間違っておりますか?
実現したいこと
ここに実現したいことを箇条書きで書いてください。
- ▲▲機能を動作するようにする
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
JavaScript
1 2// data-targetの内容をIDにしてmodalに代入 3var modal = '#' + $(this).attr('data-target'); 4// モーダルウィンドウ1が表示されたら 5if(modal == '#modal1'){ 6 // aタグがクリックされたらの処理 7 $("#hoge").on('click', function(){ 8 // modal2 へ遷移 9 // hide は非表示、syowは表示 10 $('#modal1').collapse( 'hide' ); 11 $('#modal2').collapse('show'); 12 }); 13}
PHP
1// モーダル1のHTMLタグはDBから読み込み生成 2$tags[] = '<p><a id="'. $xxxId .'" class="modal-open reset" data-toggle="collapse" data-target="modal2">'.$yyy['xxxx'].'</a></p>'; 3 4 5<!-- モーダル本体1 --> 6<div id="modal1" class="modal-container"> 7 <div class="modal-body"> 8 <!-- 閉じるボタン --> 9 <div class="modal-close">X</div> 10 <!-- モーダル内のコンテンツ --> 11 <div class="modal-content"> 12 <p>テストタイトル</p> 13 <?php 14 foreach($tags as $tag){ 15 echo $tag; 16 } 17 ?> 18 </div> 19 </div> 20 </div> 21 22<!-- モーダル本体2 --> 23<div id="modal2" class="modal-container collapse"> 24 <div class="modal-body"> 25 <!-- 閉じるボタン --> 26 <div class="modal-close">X</div> 27 <!-- モーダル内のコンテンツ --> 28 <div class="modal-content"> 29 <p>モーダル2です</p> 30 </div> 31 </div> 32 </div>
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。