Laravel模態彈出視窗不適用于ajax-有解無憂

大家好，我試圖在我的 laravel 專案中使用 ajax 制作一個模態彈出視窗，但它不起作用，我試圖制作一個警報彈出視窗，它作業得很好，但模態不是，這是我的代碼

錯誤是 $(...).modal 不是函式

<div class="content">
    <!-- Modal -->
    <div class="modal fade" id="editModal" 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="exampleModalLongTitle">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>

    <a class="edit_click btn btn-warning" >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">

uj5u.com熱心網友回復：

這是你的代碼。怎么了？:)

<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 class="content">
    <!-- Modal -->
    <div class="modal fade" id="editModal" 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="exampleModalLongTitle">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">
                    Hello World
                </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>

    <a class="edit_click btn btn-warning" >Edit</a>

</div>

<script>

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

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


            });
        });

</script>

</body>
</html>

https://jsfiddle.net/socb29ea/

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/527948.html

標籤：phpjQuery阿贾克斯拉拉维尔引导模式

上一篇：1.3 簡單用戶互動

下一篇：如何以HTML模式顯示AJAXWikipediaAPI呼叫