モーダルの切り替え

暇を持て余す社内ニートその３（多分）

モーダルの切り替え：解説でなく自分用
閲覧になった方は参考のURLへ移動するか、検索しなおすことをお勧めします。

HTMLはパクリ
・モーダルは待機状態イメージ。

#やってること
モーダル１：message-modal1　を開いてOKすると
モーダル２：message-modal2　を開く
モーダル２をキャンセル（insert-message-cancel ）したらモーダル１に戻る。

##HTMLの中

html

<div class="modal fade" id="message-modal1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">モーダル1</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>
      <div class="modal-body">
        <a data-toggle="modal" href="#message-modal2" class="btn btn-primary">モーダルを開く</a>
      </div>
      <div class="modal-footer">
        <a href="#" data-dismiss="modal" class="btn">閉じる</a>
        <a href="#" class="btn btn-primary">ただのボタン</a>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="message-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">モーダル2</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>
      <div class="modal-body">
       モーダル
      </div>
      <div class="modal-footer">
        <a href="#" data-dismiss="modal" id=insert-message-cancel class="btn">閉じる</a>
<!--ここで data-dismiss="modal"を使っているが不要かも。-->
        <a href="#" class="btn btn-primary">ただのボタン</a>
      </div>
    </div>
  </div>
</div>

##jqueryの中身

jquery

<script>
/*モーダルの変更*/            
$(function(){
    changeModal('message-modal', 'message-modal2');
    function changeModal(beforeModal, afterModal) {
        $('#'+beforeModal).modal( 'hide' );
        $('#'+afterModal).modal('show');
    }
});

$('#insert-message-cancel').on('click', function () {
    changeModal('message-modal2', 'message-modal');
    function changeModal(beforeModal, afterModal) {
        $('#'+beforeModal).modal('hide');
        $('#'+afterModal).modal('show');
    }
}); 
<script>

♯参考資料
・モーダルから別のモーダルを表示する
https://qiita.com/tomlaw/items/1fd8edc9ca1522ad270e
参考にしたけどうまく使えそうになかった。
bootstrapの思想としては論外だけど、スクロール意識しないなら以下で十分だった。

jquery

/*モーダルの上書き*/            
$(function(){
   $('#message-modal2').modal('show')
});

・Bootstrapでモーダルを複数重ねて表示する
（課題があって解決したらしいけど、応用できずにいる。）
https://slash-mochi.net/?p=3041

モーダル複数サンプル（ようわからん）
http://yebisupress.dac.co.jp/2018/06/11/tips_when_using_bootstrap_multiple_modal_overaly/