LaravelプロジェクトにBootstrap4を使用してModalコンテンツ（ポップアップ画面）の表示を行なっていきます。

今回使用する環境

パッケージ名	バージョン
Laravel	5.7
Bootstrap	4.3

今回実装するもの

サンプルのページにボタンを表示し、ボタンをクリックした際にModalコンテンツを表示します。

今回はサンプルページとして一度本ブログで紹介したサンプルページを使用しています。

www.raruspeer.com

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">&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">CLOSE</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

</div>

@endsection