Laravel 刀片中的 bootstrap 4.x 模态

Posted 2023-03-21

【中文标题】Laravel 刀片中的 bootstrap 4.x 模态

【英文标题】：bootstarp 4.x modal on Laravel blade

【发布时间】：2022-01-13 10:18:00

【问题描述】：

我想在 laravel Blade 上使用一个引导层的模态层。

我正在使用 bootstrap4.0 和 laravel 6.02

但是我放的mondal没有出现，出现错误。

我推荐https://getbootstrap.com/docs/4.2/components/modal/

并且视图是默认的 laravel 刀片。 = 欢迎.blade.php

app.js 在这里 https://www.dropbox.com/s/4m5vn3xbx6gj5zi/app.js

我应该如何修改它？

jquery.tablefix.js:113 Uncaught ReferenceError: jQuery is not defined
    at jquery.tablefix.js:113
(anonymous) @ jquery.tablefix.js:113
(index):18 Uncaught TypeError: $(...).tablefix is not a function
    at htmlDocument.<anonymous> ((index):18)
    at Function.ready (jquery.min.js:28)
    at HTMLDocument.t (jquery.min.js:36)

(anonymous) @ (index):18
ready @ jquery.min.js:28
t @ jquery.min.js:36
(index):18 Uncaught TypeError: $(...).tablefix is not a function
    at HTMLDocument.<anonymous> ((index):18)
    at ready (jquery.min.js:28)

@extends('layouts.menu')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">INDEX PAGE</div>

                <div class="card-body">
                    @if (session('status'))
                    <div class="alert alert-success" role="alert">
                         session('status') 
                    </div>
                    @endif

                    MODAL TEST<br />
<!-- 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 class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>


                </div>
            </div>
        </div>
    </div>
</div>

@endsection

【问题讨论】：

你能添加你的jquery代码吗？错误说它与 jquery 有关，我没有看到任何 jquery

Jquery 未加载。 Bootstrap 依赖于 Jquery。尝试先解决这个问题。

【参考方案1】：

一些引导组件需要 jquery、popper ...等等 所以你应该添加jquery

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

来自 bootstrap 官网：https://getbootstrap.com/docs/4.0/getting-started/introduction/

【参考方案2】：

您可以尝试使用 Jquery 显示模式。只需导入 Jquery Cdn：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  

然后，制作你的 id 按钮：

<button id="showModal">Show Modal</button>

最后一步，使用Jquery显示模态：

$('#showModal').click(function ()
    $('#exampleModalCenter').modal('show');
);

您也可以通过相同的方式隐藏模态：

$('#hideModal').click(function ()
    $('#exampleModalCenter').modal('hide');
);