ミライ創造学舎

事業の最新情報の更新及び開発手法・おすすめのテクニックの紹介をさせて頂きます。

Bootstrapを活用しよう!【Ⅳ. モーダルの作成】

皆さん、本日もお疲れ様です。

 

早速、Bootstrapを用いた「モーダル」の作成方法の紹介をさせて頂きます。



 

Bootstrapを用いたモーダルの作成


モーダルとは??

  = 「モーダルウインドウ」のこと。 

    ボタンを押されるなどのタイミングで

    親ウインドウの上に子ウインドウを表示する。

      子ウインドウの処理が終わったら閉じることで、

     再び親ウインドウを操作出来るようになる

 

言葉だけだとイメージつきにくいですよね...💦

では、実際にどのようなものなのか動きを確認してみましょう。


【実行例】

f:id:Varth-Connect:20190828225049p:plain

                 ↓

f:id:Varth-Connect:20190828225140p:plain
 

この「テスト : m_01」というタイトルをクリックした際に

表示された子ウインドウが[ モーダルウインドウ ]と呼ばれているものになります。
これが表示されている間は、

後ろで表示されている親ウインドウは操作することが出来ません。

操作出来るようにするには、閉じるボタンを押して、画面を閉じる必要があります。

 

 

 

 

どのようにすればモーダルの機能を実現できるのか??

■ モーダル表示の種類もいくつかありまして、今回はその中でも上記と同じく中央に表示させる方法をご紹介致します。

 

【コード : 親ウインドウに表示させる部分】
<div class="content">
  <h1 class="pageTitle">モーダル表示 : フォームテスト</h1>
  <div class="b_content" >
    <h2 class="t_b" data-toggle="modal" data-target="#modal1" >
    <a href="#" class="link_b" name="con">テスト : m_01</a></h2>
    <p class="p_b">【-------  説明文 ---------】</p>
    <img src="DSC_0481.JPG" class="test04_img">
  </div>
  <div class="b_content">
    <h2 class="t_b" data-toggle="modal" data-target="#modal2">
    <a href="#" class="link_b" name="road">テスト : m_02</a></h2>
    <p class="p_b">【-------  説明文 ---------】</p>
    <img src="DSC_0509.JPG" class="test04_img" >
  </div>
</div>

[ 解説 ]

● data-target

  = 表示されるモーダルウインドウを指定する : #○○で指定する。

● data-toggle

  = 「toggle」は「なにをするか」を指定 : 今回はmodal。

 

【 コード : モーダルウインドウ本体 】
<div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" 
                                              data-show="true" data-keyboard="true" data-backdrop="static">   
  <!-- modal-dialog-centered : 垂直に中央表示   -->
  <!-- .modal-dialog-scrollable : スクロールを可能にする -->
  <!-- モーダルが表示された際のコンテンツをclass = "modal-dialog"内に記述 -->
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  <!-- class="modal-content"の中に具体的な内容を記述 -->
    <div class="modal-content">
      <!-- モーダルヘッダー -->
      <div class="modal-header">
        <!-- モーダルタイトル -->
	<h4 class="modal-title">子ウインドウ : m_01</h4>
	  <!-- モーダルを閉じる「?」ボタン -->
	  <button type="button" class="close" data-dismiss="modal">
	    <span aria-hidden="true">&#215;</span>
	  </button>
	  <!-- 「?」: 終 -->
      </div>
      <!-- モーダルの中身 -->
      <div class="modal-body">
        <!-- フォームを作成 -->
	<form>
	  <div class="form-group">
	    <label for="recipient-name" class="control-label">氏名 :</label>
	    <input type="text" class="form-control" id="recipient-name">
	  </div>
	  <div class="form-group">
	    <label for="recipient-name" class="control-label">メールアドレス :</label>
	    <input type="text" class="form-control" id="recipient-name">
	  </div>
	  <div class="form-group">
	    <label for="message-text" class="control-label">問い合わせ内容 :</label>
	    <textarea class="form-control" id="message-text"></textarea>
	  </div>
	</form>
	<!-- フォーム : 終 -->
      </div>
      <!-- モーダルの中身 : 終 -->
      <div class="modal-footer">
      <!-- モーダルを閉じるボタン -->
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
      <!-- 終 -->
      </div>
    </div> 
  </div> 
</div>


[ 解説 ]

class="modal"

   = 上記を記述したdivの中にモーダルに関する内容を書いていく。 

 

id = "modal1"

  = data-targetと紐づけることで、表示させるモーダルを選択できる。

 

● tabindex="-1"

   =[Esc]キーでダイアログを閉じる

 

class= "modal-dialog"

   = モーダルに必要な内容が記述されているメインのclass。

 

class="modal-dialog-centered"

 =  画面の垂直に中央表示

 

class="modal-dialog-scrollable"

   = スクロールを可能にする。

        ↓↓

【例】

f:id:Varth-Connect:20190829002707p:plain



 

class="modal-content"

   = モーダルの具体的な内容を記述するためのdivタグ内に配置。

 

● class="modal-header"

  = モーダルのヘッダーを指定

 

● class="modal-title"

  = モーダルのタイトルを指定

<button type="button" class="close" data-dismiss="modal">        

     <span aria-hidden="true">&#215;</span>      

</button>

 = モーダルを閉じる「✖」ボタン



           ↓↓

【例】

f:id:Varth-Connect:20190829002811p:plain



 

● class="modal-body"

   = モーダルの中身


● class="modal-footer"

   = モーダルのフッターを指定


 <button type="button" class="btn btn-default"

                   data-dismiss="modal">閉じる</button>

   = モーダルを閉じるボタン

          ↓↓

【例】


f:id:Varth-Connect:20190829002941p:plain
 

 

以上の内容を実践すると、

以下のような実行結果を確認することが出来ます。

 

【実行結果】

f:id:Varth-Connect:20190829003427p:plain


 

複数のモーダルを表示させる方法も御座いますが、

今回は割愛させて頂きます。

興味がある方もしくは質問などある場合は、気軽にご連絡頂ければと思います。

 

 

 

 

 

それでは、

今回はこれで終わっていきたいと思います。

皆さんの開発の手助けに少しでもなれば嬉しいです。

 

 

次回は、

Bootstrapを活用したよくECサイトで見かけるような

「カードリストの作成」

方法についてみていきたいと思います。

 

 

 

 

===========================================

↓↓ 以下のSNSでも情報の掲載などしております。

===========================================