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

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

ただいまの
回答率

90.52%

  • jQuery

    6686questions

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

  • HTML5

    4005questions

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

  • Bootstrap

    957questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 404

SayakaxxSakura

score 12

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

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

動作の流れとしては

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

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

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

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

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

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

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

<button type="button" class="btn btn-github" data-toggle="modal" data-target="#modal-default">
 コンテンツ追加
</button>



<!-- ====================================================================================
| モーダルウィンドウ中身
===================================================================================== -->

<div class="modal fade" id="modal-default">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-body">
    <h4 class="small">追加</h4>
    <div class="bottom">
     <select class="extraction">
      <option value="list1">list1</option>
      <option value="list2">list2</option>
      <option value="list3">list3</option>
      <option value="list4">list4</option>
      <option value="list5">list5</option>
     </select>
     </div>
      <div class="list1 none">
       list1
      </div>

      <div class="list2 none">
      list2
      </div>

      <div class="list3 none">
       list3
      </div>

      <div class="list4 none">
       list4
      </div>

      <div class="list5 none">
        リスト5
      </div>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close </button>
     <button type="button" class="btn btn-github third" id="save5">Save changes</button>
   </div><!--modal-footer-->
  </div><!--modal-content-->
 </div><!--dialog-->
</div><!-- modal fade -->
//モーダルウィンドウを開く動作はbootstrap3の処理を使っているので独自で書いているコードはありません。

<script> 
  $(".extraction").change(function() {
    var extraction_val = $(".extraction").val();
  if(extraction_val == "list1") {
    $('.list1').css('display', 'block');
    $('.list2').css('display', 'none');
    $('.list3').css('display', 'none');
    $('.list4').css('display', 'none');
    $('.list5').css('display', 'none');
    }else if(extraction_val == "list2") {
    $('.list1').css('display', 'none');
    $('.list2').css('display', 'block');
    $('.list3').css('display', 'none');
    $('.list4').css('display', 'none');
    $('.list5').css('display', 'none');
    }else if(extraction_val == "list3") {
     $('.list1').css('display', 'none');
    $('.list2').css('display', 'none');
    $('.list3').css('display', 'block');
    $('.list4').css('display', 'none');
    $('.list5').css('display', 'none');
    } else if(extraction_val == "list4") {
 $('.list1').css('display', 'none');
    $('.list2').css('display', 'none');
    $('.list3').css('display', 'none');
    $('.list4').css('display', 'block');
    $('.list5').css('display', 'none');
    } else if(extraction_val == "list5") {
 $('.list1').css('display', 'none');
    $('.list2').css('display', 'none');
    $('.list3').css('display', 'none');
    $('.list4').css('display', 'none');
    $('.list5').css('display', 'block');
    } 
});
</script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/13 17:38

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

    キャンセル

  • s8_chu

    2018/07/13 20:31 編集

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

    キャンセル

  • SayakaxxSakura

    2018/07/13 20:42

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

    キャンセル

回答 1

checkベストアンサー

+3

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

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

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>タイトル</title>
</head>
<body>
<button type="button" class="btn btn-github" data-toggle="modal" data-target="#modal-default">
    コンテンツ追加
</button>
<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h4 class="small">追加</h4>
                <div class="bottom">
                    <select class="extraction">
                        <option value="list1">list1</option>
                        <option value="list2">list2</option>
                        <option value="list3">list3</option>
                        <option value="list4">list4</option>
                        <option value="list5">list5</option>
                    </select>
                </div>
                <div class="list1 none">
                    list1
                </div>

                <div class="list2 none">
                    list2
                </div>

                <div class="list3 none">
                    list3
                </div>

                <div class="list4 none">
                    list4
                </div>

                <div class="list5 none">
                    リスト5
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-github third" id="save5"
                        data-toggle="modal" data-dismiss="modal" data-target="">
                    Save changes
                </button>
            </div><!--modal-footer-->
        </div><!--modal-content-->
    </div><!--dialog-->
</div><!-- modal fade -->

<div class="modal fade" id="submodal-list1" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"> </i></button>
            <div class="modal-body">
                <p>list1</p>
                <label>
                    <input type="text" name="name">
                </label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-github third">Save changes</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="submodal-list2" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"> </i></button>
            <div class="modal-body">
                <p>list2</p>
                <label>
                    <input type="text" name="name">
                </label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-github third">Save changes</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="submodal-list3" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"> </i></button>
            <div class="modal-body">
                <p>list3</p>
                <label>
                    <input type="text" name="name">
                </label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-github third">Save changes</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="submodal-list4" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"> </i></button>
            <div class="modal-body">
                <p>list4</p>
                <label>
                    <input type="text" name="name">
                </label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-github third">Save changes</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="submodal-list5" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"> </i></button>
            <div class="modal-body">
                <p>list5</p>
                <label>
                    <input type="text" name="name">
                </label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-github third">Save changes</button>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(".extraction").on("change", function () {
        var extraction_val = $(".extraction").val();
        $("div[class^='list']").css("display", "none");
        $("." + extraction_val).css("display", "block");
        $("#save5").attr("data-target", "#submodal-" + extraction_val); // 追記
    }).change();
</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/17 12:01

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

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6686questions

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

  • HTML5

    4005questions

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

  • Bootstrap

    957questions

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