LaravelプロジェクトにBootstrap4を使用してModalコンテンツ(ポップアップ画面)の表示を行なっていきます。
今回使用する環境
パッケージ名 | バージョン |
---|---|
Laravel | 5.7 |
Bootstrap | 4.3 |
今回実装するもの
サンプルのページにボタンを表示し、ボタンをクリックした際にModalコンテンツを表示します。
今回はサンプルページとして一度本ブログで紹介したサンプルページを使用しています。
Bootstrap4を使用するための設定
まず始めにBootstrap4を使用する為にCSSとJSの紐付けを行います。
下記のようにheadタグにはCSS、scriptとしてJSを紐付けます。
[ディレクトリ]
resources/views/layouts/
[ファイル名]
master.blade.php
<!doctype html> <html> <head> <title>サンプルサイト:@yield('title')</title> {{-- ↓この部分が「CSS」 --}} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous"> {{-- ↑この部分が「CSS」 --}} </head> <body> <div class="container"> @yield('content') </div> </body> {{-- ↓この部分が「JS」 --}} <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp" crossorigin="anonymous"></script> {{-- ↑この部分が「JS」 --}} </html>
CSSコピペ用 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous"> JSコピペ用 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp" crossorigin="anonymous"></script>
bootstrap4公式にも導入方法は紹介されています。
公式リンク:https://cccabinet.jpn.org/bootstrap4/getting-started/introduction
ボタンの追加
Blade.phpファイルにボタンとModal表示用の画面定義を追加します。
[ディレクトリ]
resources/views/
[ファイル名]
sample.blade.php
@extends('layout.master') @section('title', 'サンプルページ') @section('content') <div class="border p-3"> <p>サンプル画面だよ。</p> <!-- モーダルの表示用ボタン --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> モーダル表示用ボタン </button> <!-- モーダルの表示領域 --> <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 class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenterTitle">モーダルのタイトル</h5> <button type="button" class="close" data-dismiss="modal" aria-label="閉じる"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>モーダルテスト</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">CLOSE</button> <button type="button" class="btn btn-primary">OK</button> </div> </div> </div> </div> </div> @endsection
実際に表示される画面
ボタンを押すとModalコンテンツが表示されます。
今回ではModalコンテンツで「OK」を押しても何も動作は起こりません。
サンプル画面だよ。
まとめ
bootstrapを使用することで容易にModalコンテンツを実装することが出来ます。
Modalのタイプは他に何種類かありますので、興味を持たれた方は公式を確認してみましょう。