bootstarp 4.x modal on Laravel blade-CodePudding

I would like to use a modal layer of bootstrap on laravel blade.

I am using bootstrap4.0 and laravel 6.02

But the mondal I put did not appear ,occuring errors.

I refer https://getbootstrap.com/docs/4.2/components/modal/

and the view is default laravel blade. = welcome.blade.php

app.js is here https://www.dropbox.com/s/4m5vn3xbx6gj5zi/app.js

How should I modify it?

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 >
    <div >
        <div >
            <div >
                <div >INDEX PAGE</div>

                <div >
                    @if (session('status'))
                    <div  role="alert">
                        {{ session('status') }}
                    </div>
                    @endif

                    MODAL TEST<br />
<!-- Button trigger modal -->
<button type="button"  data-toggle="modal" data-target="#exampleModalCenter">
    Launch demo modal
  </button>
  
  <!-- Modal -->
  <div  id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div  role="document">
      <div >
        <div >
          <h5  id="exampleModalCenterTitle">Modal title</h5>
          <button type="button"  data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div >
          ...
        </div>
        <div >
          <button type="button"  data-dismiss="modal">Close</button>
          <button type="button" >Save changes</button>
        </div>
      </div>
    </div>
  </div>


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

@endsection

CodePudding user response：

some bootstrape components needs jquery,popper ... and more So you should add 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>

source from bootstrap official site : https://getbootstrap.com/docs/4.0/getting-started/introduction/

CodePudding user response：

You can try to display modal by using Jquery. just import Jquery Cdn:

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

Then, make your id button:

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

And the final step, using Jquery to display modal:

$('#showModal').click(function (){
    $('#yourModalId').modal('show');
});

You can also hide modal by doing the same way:

$('#hideModal').click(function (){
    $('#yourModalId').modal('hide');
});

Good luck.