記事中には広告リンクやPRが含まれます

Bootstrap実践。モーダルウインドウを作成する方法

BOOTSTRAP フリーランスエンジニアの働き方

前回はBootstrapを使用する際によく利用する、ナビゲーションメニューの作成方法を解説しました。

ナビゲーションメニューはレスポンシブデザインにも対応しているので、本当に使いやすいものとなっています。

今回はナビゲーションメニューと同様によく使用される、モーダルウインドウの作成方法を解説していきます。

<h2>モーダルウインドウとは</h2>
そもそもモーダルウインドウとはなんぞや?という方もいらっしゃると思います。

モーダルウインドウとはボタンを押した後等に表示されるポップアップウインドウのことです。

ただしそのポップアップウインドウ内で指定された操作を完了したり、キャンセル操作するまで他の(元の)画面の操作が行えなくなります。

ウインドウが表示されている間は他の画面の操作が出来ない点がただのポップアップウインドウと異なる点ですね。

よくログイン画面や全画面の広告などでこのモーダルウインドウが使用されています。

スポンサーリンク

モーダルウインドウの作成方法

BootstrapのモーダルウインドウはHTML、CSS、JavaScriptで構築されていおり、モーダルヘッダー、モーダルボディ、モーダルフッターの3つで構成されています。

基本的な文法から使用方法を順番に見ていきましょう。


基本文法

モーダルウインドウの基本文法は以下の通りです。

■記述例

<!-- メインウインドウのボタン -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  モーダルウインドウ起動ボタン
</button>

<!-- モーダルウインドウ—>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">モーダルウインドウのタイトル</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>モーダルウインドウのテキスト</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存する</button>
      </div>
    </div>
  </div>
</div>

モーダルウインドウはdivタグにmodalクラスを設定し、その下位のタグにもモーダルウインドウ関連のクラスを設定しますが、基本的には決まり文句となっています。

ですので、基本的には記述例をコピペして微調整していけば良いです。

また、メインウインドウのボタンとモーダルウインドウの紐付けはメインウインドウのボタンタグのdata-target属性の値とモーダルウインドウ1番目のdivタグのidの値を合わせることで行います。

記述例ではメインのウインドウで「保存する」ボタンを押された時の確認のモーダルウインドウのイメージとなります。

<h3>モーダルウインドウを画面中央に表示する方法</h3>
基本文法の記述例だとモーダルウインドウは画面上部に表示されます。

これを画面中央に表示したい場合は、2番目のdivタグにmodal-dialog-centeredクラスを適用します。

■記述例

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
 ・
 ・
 ・
  </div>
</div>

複数のボタンからモーダルウインドウを表示する方法

メインウインドウの複数のボタンから一つのモーダルウインドウを表示したい場合があると思います。

その場合は、基本文法の欄でも触れましたが、メインウインドウのdata-target属性とモーダルウインドウの1番目のdivタグのid属性を合わせることで実現できます。

■記述例

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">ボタン1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">ボタン2</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">ボタン3</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 ・
 ・
 ・
</div>

モーダルウインドウをフェードインでなくする方法

基本文法ではモーダルウインドウをフェードインで表示する記述方法でしたが、フェードインではなくパッと表示させたい場合の方法です。

基本文法でモーダルウインドウの1番目のdivタグに指定していた、fadeクラスの指定をなくすと実現できます。

■記述例

<!-- メインウインドウのボタン -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  モーダルウインドウ起動ボタン
</button>

<!-- モーダルウインドウ—>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 ・
 ・
 ・
</div>

モーダルウインドウのサイズを変更する方法

モーダルウインドウは特に指定がなければmax-width500pxとなります。

これ以外にもモーダルウインドウの2番目のdivタグに以下のクラスを指定することでmax-widthを変更することが可能です。

  • modal-smクラス:300px
  • modal-lgクラス:800px
  • modal-xlクラス;1140px

■記述例:modal-smクラスの場合

<!-- メインウインドウのボタン -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  モーダルウインドウ起動ボタン
</button>

<!-- モーダルウインドウ—>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
 ・
 ・
 ・
  </div>
</div>

まとめ

今回はモーダルウインドウについて解説しました。

Bootstrapを使用するとWebページに色々なサイズのモーダルウインドウを簡単に設置することができます。

モーダルウインドウはログインやデータ保存や利用規約の同意など色々な場面で使用できます。

HTMLはややこしく見えますが、基本文法のものをコピペして微調整していけばOKなので、Bootstrapを使用する場合はどんどん活用していきましょう。

エージェントへの登録はお済みですか?

今すぐフリーランスになる気がなくても、エージェントへの登録は済ませておくことをお勧めします。理由はストレスや疲労が限界に達してからだと遅いから。

現在の自身のフリーランスとしての価値・単価相場を把握できますし、条件にあった案件をキャッチできるようになるので、いざフリーランスになろうとした際に早期に手が打てます。

エージェント登録は無料なので、今はフリーランスにならなくとも登録だけはしておくべきです。

真っ先に登録すべきエージェントは、圧倒的に多くのクライアントを開拓しているDYMテック。2500社の優良な取引先と、条件交渉力が強く高条件で仕事を紹介してくれるエージェントです。

案件紹介のみでなく、エンジニアとしてのキャリア相談や業界動向のキャッチアップなど、フリーランス対してのサポートも充実していますので、初めてフリーランスに挑戦する方も安心です。

DYMテックの詳細を見る

フリーランスエンジニアの働き方
スポンサーリンク
shigotoswitchをフォローする
しごとスイッチ