Laravel the modal popup is not working with ajax-CodePudding

Hello guys i was trying to make a modal popup using ajax in my laravel project but it's not working, i tried to make an alert popup and it was working so fine but the modal is not and this is my code

The error is $(...).modal is not a function

<div >
    <!-- Modal -->
    <div  id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div  role="document">
            <div >
                <div >
                    <h5  id="exampleModalLongTitle">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>

    <a  >Edit</a>

</div>

<script>

    $(function (){
            $('.edit_click').click(function (){

            $('#editModal').modal('show');


            });
        });

</script>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

CodePudding user response：

here is your code. what is wrong? :)

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>

<div >
    <!-- Modal -->
    <div  id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div  role="document">
            <div >
                <div >
                    <h5  id="exampleModalLongTitle">Modal title</h5>
                    <button type="button"  data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div >
                    Hello World
                </div>
                <div >
                    <button type="button"  data-dismiss="modal">Close</button>
                    <button type="button" >Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <a  >Edit</a>

</div>

<script>

    $(function (){
            $('.edit_click').click(function (){

            $('#editModal').modal('show');


            });
        });

</script>

</body>
</html>

https://jsfiddle.net/socb29ea/