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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

16245閲覧

モーダルウィンドウからモーダルウィンドウを開く処理

SayakaxxSakura

総合スコア19

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1グッド

2クリップ

投稿2018/07/13 06:28

編集2018/07/13 08:41

作業環境
Jquery3.3.1
HTML5 (bootstrap3)
開発環境 xamppローカルホスト

とある案件にて管理画面を1から作成させていただいております。
今回力を貸して頂きたいのがタイトルにもある通りモーダルウィンドウから別モーダルウィンドウを開くような動作です

動作の流れとしては

フロント画面にモーダルウィンドウを開くボタンがある

ボタン ←これを押すと一枚目のモーダルウィンドウが開く

-モーダルウィンドウbody内-
セレクトボックスで要素を選択できる
要素を選択後、モーダルウィンドウ内のボタンを押せば
選んだ要素に対応したモーダルウィンドウが開き直される。

開き直されたモーダルウィンドウ内で必要項目を入力し入力した値を保存し追加
(値の保存追加、処理はひとまず大丈夫です)

現在できている処理として
一枚目までのモーダルウィンドウを開いて、セレクトボックスから値を選択して
選択された要素に基づいた値を出現させるまではできています。

ここからどうやってモーダルウィンドウを開き直させるのかがわかりません。。

何卒よろしくお願い致します。

HTML

1<button type="button" class="btn btn-github" data-toggle="modal" data-target="#modal-default"> 2 コンテンツ追加 3</button> 4 5 6 7<!-- ==================================================================================== 8| モーダルウィンドウ中身 9===================================================================================== --> 10 11<div class="modal fade" id="modal-default"> 12 <div class="modal-dialog"> 13 <div class="modal-content"> 14 <div class="modal-body"> 15 <h4 class="small">追加</h4> 16 <div class="bottom"> 17 <select class="extraction"> 18 <option value="list1">list1</option> 19 <option value="list2">list2</option> 20 <option value="list3">list3</option> 21 <option value="list4">list4</option> 22 <option value="list5">list5</option> 23 </select> 24 </div> 25 <div class="list1 none"> 26 list1 27 </div> 28 29 <div class="list2 none"> 30 list2 31 </div> 32 33 <div class="list3 none"> 34 list3 35 </div> 36 37 <div class="list4 none"> 38 list4 39 </div> 40 41 <div class="list5 none"> 42 リスト5 43 </div> 44 </div> 45 <div class="modal-footer"> 46 <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close </button> 47 <button type="button" class="btn btn-github third" id="save5">Save changes</button> 48 </div><!--modal-footer--> 49 </div><!--modal-content--> 50 </div><!--dialog--> 51</div><!-- modal fade --> 52 53

jQuery

1 2//モーダルウィンドウを開く動作はbootstrap3の処理を使っているので独自で書いているコードはありません。 3 4<script> 5 $(".extraction").change(function() { 6 var extraction_val = $(".extraction").val(); 7 if(extraction_val == "list1") { 8 $('.list1').css('display', 'block'); 9 $('.list2').css('display', 'none'); 10 $('.list3').css('display', 'none'); 11 $('.list4').css('display', 'none'); 12 $('.list5').css('display', 'none'); 13 }else if(extraction_val == "list2") { 14 $('.list1').css('display', 'none'); 15 $('.list2').css('display', 'block'); 16 $('.list3').css('display', 'none'); 17 $('.list4').css('display', 'none'); 18 $('.list5').css('display', 'none'); 19 }else if(extraction_val == "list3") { 20 $('.list1').css('display', 'none'); 21 $('.list2').css('display', 'none'); 22 $('.list3').css('display', 'block'); 23 $('.list4').css('display', 'none'); 24 $('.list5').css('display', 'none'); 25 } else if(extraction_val == "list4") { 26 $('.list1').css('display', 'none'); 27 $('.list2').css('display', 'none'); 28 $('.list3').css('display', 'none'); 29 $('.list4').css('display', 'block'); 30 $('.list5').css('display', 'none'); 31 } else if(extraction_val == "list5") { 32 $('.list1').css('display', 'none'); 33 $('.list2').css('display', 'none'); 34 $('.list3').css('display', 'none'); 35 $('.list4').css('display', 'none'); 36 $('.list5').css('display', 'block'); 37 } 38}); 39</script> 40 41
退会済みユーザー👍を押しています

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

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

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

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

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

m.ts10806

2018/07/13 08:38

Bootstrapもタグに追加しておいてください >bootstrap3の処理を使っている
s8_chu

2018/07/13 11:32 編集

ひとつ質問なのですが、「選んだ要素に対応したモーダルウィンドウ」は、「選択できる項目の数だけ用意する」という理解で良いのでしょうか?
SayakaxxSakura

2018/07/13 11:42

はいその通りです。中身に付いてはなるべくPHPで動的に処理する予定です。
guest

回答1

0

ベストアンサー

  • ボタンにdata-target属性を指定すると、そのボタンをクリックしたとき、data-target属性に設定したid属性の値を持つモーダルウィンドウが表示される
  • ボタンにdata-dismiss属性を指定すると、そのボタンをクリックしたとき、そのボタンが存在するモーダルウィンドウが閉じられる

というわけで、「1つ目のモーダルウィンドウで決定ボタンがクリックされたときに、そのモーダルウィンドウを閉じて、新しいモーダルウィンドウを表示する」という動作は、上の2つの属性を使うことで実現できると思います。
質問者さんの実現したいことは以下のように行えると思いますが、いかがでしょうか?

HTML

1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 6 <title>タイトル</title> 7</head> 8<body> 9<button type="button" class="btn btn-github" data-toggle="modal" data-target="#modal-default"> 10 コンテンツ追加 11</button> 12<div class="modal fade" id="modal-default"> 13 <div class="modal-dialog"> 14 <div class="modal-content"> 15 <div class="modal-body"> 16 <h4 class="small">追加</h4> 17 <div class="bottom"> 18 <select class="extraction"> 19 <option value="list1">list1</option> 20 <option value="list2">list2</option> 21 <option value="list3">list3</option> 22 <option value="list4">list4</option> 23 <option value="list5">list5</option> 24 </select> 25 </div> 26 <div class="list1 none"> 27 list1 28 </div> 29 30 <div class="list2 none"> 31 list2 32 </div> 33 34 <div class="list3 none"> 35 list3 36 </div> 37 38 <div class="list4 none"> 39 list4 40 </div> 41 42 <div class="list5 none"> 43 リスト5 44 </div> 45 </div> 46 <div class="modal-footer"> 47 <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close</button> 48 <button type="button" class="btn btn-github third" id="save5" 49 data-toggle="modal" data-dismiss="modal" data-target=""> 50 Save changes 51 </button> 52 </div><!--modal-footer--> 53 </div><!--modal-content--> 54 </div><!--dialog--> 55</div><!-- modal fade --> 56 57<div class="modal fade" id="submodal-list1" tabindex="-1"> 58 <div class="modal-dialog"> 59 <div class="modal-content"> 60 <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"> </i></button> 61 <div class="modal-body"> 62 <p>list1</p> 63 <label> 64 <input type="text" name="name"> 65 </label> 66 </div> 67 <div class="modal-footer"> 68 <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close</button> 69 <button type="button" class="btn btn-github third">Save changes</button> 70 </div> 71 </div> 72 </div> 73</div> 74<div class="modal fade" id="submodal-list2" tabindex="-1"> 75 <div class="modal-dialog"> 76 <div class="modal-content"> 77 <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"> </i></button> 78 <div class="modal-body"> 79 <p>list2</p> 80 <label> 81 <input type="text" name="name"> 82 </label> 83 </div> 84 <div class="modal-footer"> 85 <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close</button> 86 <button type="button" class="btn btn-github third">Save changes</button> 87 </div> 88 </div> 89 </div> 90</div> 91<div class="modal fade" id="submodal-list3" tabindex="-1"> 92 <div class="modal-dialog"> 93 <div class="modal-content"> 94 <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"> </i></button> 95 <div class="modal-body"> 96 <p>list3</p> 97 <label> 98 <input type="text" name="name"> 99 </label> 100 </div> 101 <div class="modal-footer"> 102 <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close</button> 103 <button type="button" class="btn btn-github third">Save changes</button> 104 </div> 105 </div> 106 </div> 107</div> 108<div class="modal fade" id="submodal-list4" tabindex="-1"> 109 <div class="modal-dialog"> 110 <div class="modal-content"> 111 <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"> </i></button> 112 <div class="modal-body"> 113 <p>list4</p> 114 <label> 115 <input type="text" name="name"> 116 </label> 117 </div> 118 <div class="modal-footer"> 119 <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close</button> 120 <button type="button" class="btn btn-github third">Save changes</button> 121 </div> 122 </div> 123 </div> 124</div> 125<div class="modal fade" id="submodal-list5" tabindex="-1"> 126 <div class="modal-dialog"> 127 <div class="modal-content"> 128 <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"> </i></button> 129 <div class="modal-body"> 130 <p>list5</p> 131 <label> 132 <input type="text" name="name"> 133 </label> 134 </div> 135 <div class="modal-footer"> 136 <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close</button> 137 <button type="button" class="btn btn-github third">Save changes</button> 138 </div> 139 </div> 140 </div> 141</div> 142<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 143<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 144<script> 145 $(".extraction").on("change", function () { 146 var extraction_val = $(".extraction").val(); 147 $("div[class^='list']").css("display", "none"); 148 $("." + extraction_val).css("display", "block"); 149 $("#save5").attr("data-target", "#submodal-" + extraction_val); // 追記 150 }).change(); 151</script> 152</body> 153</html>

投稿2018/07/13 12:12

編集2018/07/13 12:29
s8_chu

総合スコア14731

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

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

SayakaxxSakura

2018/07/17 03:01

わかりやすくありがとうございます! 動作も確認できました!!助かりましたーorz
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問