ホーム
/
bootstrap
/
簡単！bootstrapモーダルのサイズや背景変更などの解説

モーダルポップアップ

簡単！bootstrapモーダルのサイズや背景変更などの解説

投稿日: 2016年9月18日2018年9月12日投稿者: kishiken

bootstrapモーダルmodalのサンプルとオプションの付け方を解説します。

ライトプラン　詳細はこちら

参考文献

http://getbootstrap.com/javascript/#modals

目次

1 モーダルのサイズを変更する
2 出現アニメーション
3 背景の指定
4 複数のオプションを指定し、JavaScriptで呼び出す

モーダルのサイズを変更する

class="modal-dialog"が付いている個所にmodal-lgのクラスを付けると、幅が広いタイプのモーダルを開く。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">テスト </button>
<div class="modal fade" id="modal1" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>閉じる
        </button>
        <h4 class="modal-title">タイトル</h4>
      </div>
      <div class="modal-body">本文ボディ </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">ボタン</button>
      </div>
    </div>
  </div>
</div>

⇒動作サンプル

class="modal-dialog"が付いている個所にmodal-smのクラスを付けると、幅が狭いタイプのモーダルを開く。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal2">テスト </button>
<div class="modal fade" id="modal2" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>閉じる
        </button>
        <h4 class="modal-title">タイトル</h4>
      </div>
      <div class="modal-body">本文ボディ </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">ボタン</button>
      </div>
    </div>
  </div>
</div>

⇒動作サンプル

出現アニメーション

class="modal"が付いている個所にfadeのクラスを省くと、出現アニメーションがなくなる。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal3">テスト </button>
<div class="modal" id="modal3" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>閉じる
        </button>
        <h4 class="modal-title">タイトル</h4>
      </div>
      <div class="modal-body">本文ボディ </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">ボタン</button>
      </div>
    </div>
  </div>
</div>

⇒動作サンプル

背景の指定

button要素にdata-backdrop="true"をしているると、背景が黒背景になる。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal4" data-backdrop="true">テスト </button>
<div class="modal fade m-b-3" id="modal4" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>閉じる
        </button>
        <h4 class="modal-title">タイトル</h4>
      </div>
      <div class="modal-body">本文ボディ </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">ボタン</button>
      </div>
    </div>
  </div>
</div>

⇒動作サンプル

button要素にdata-backdrop="false"をしているると、背景がそのままで、背景クリックしてもモーダルを閉じない。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal5" data-backdrop="false">テスト </button>
<div class="modal fade" id="modal5" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>閉じる
        </button>
        <h4 class="modal-title">タイトル</h4>
      </div>
      <div class="modal-body">本文ボディ </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">ボタン</button>
      </div>
    </div>
  </div>
</div>

⇒動作サンプル

button要素にdata-backdrop="static"をしているると、景が黒背景になり、背景クリックしてもモーダルを閉じない。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal6" data-backdrop="static">テスト </button>
<div class="modal fade" id="modal6" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>閉じる
        </button>
        <h4 class="modal-title">タイトル</h4>
      </div>
      <div class="modal-body">本文ボディ </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">ボタン</button>
      </div>
    </div>
  </div>
</div>

⇒動作サンプル

複数のオプションを指定し、JavaScriptで呼び出す

<button type="button" id="sampleButton" class="btn btn-primary">テスト </button>
<div class="modal fade" id="sampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span>×</span>
        </button>
        <h4 class="modal-title">タイトル</h4>
      </div>
      <div class="modal-body">本文 </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">ボタン</button>
      </div>
    </div>
  </div>
</div>

⇒動作サンプル