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

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

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

Q&A

解決済

1回答

366閲覧

モーダルウィンドウ上のボタンをクリックしたら、違うモーダルウィンドウに遷移したいが上手く出来ない

fullmoon311

総合スコア62

0グッド

0クリップ

投稿2022/08/18 03:13

前提

質問させていただきます。

モーダルウィンドウ(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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

自己解決

1のほうに、idへcollapse が抜けておりました、、、
しっかりと説明読んでいましたが、失礼しました。

投稿2022/08/18 03:31

fullmoon311

総合スコア62

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問