css 按下按钮时，引导模式未弹出

wa7juj8i 于 2023-01-22 发布在其他

关注(0)|答案(4)|浏览(143)

我试图使一个基本的学生名单网页使用引导。我想做的是，当模态按钮被按下，一个模态弹出，让用户输入所需的详细信息，但在此之前，我只是复制粘贴在引导的网站，以测试第一，如果一切都很好，并实现的代码。
这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>Student List</title>

  
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-8" id="pageName">
                <h1>Student List</h1>
                
            </div>
            <div class="col-4" id="newButton">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                    Launch demo modal
                </button>
                
                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">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>
    <hr>
    <table class="table">
        <thead class="thead-dark" id="tableHeader">
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Last Name</th>
                <th scope="col">First Name</th>
                <th scope="col">Course</th>
                <th scope="col">Average</th>
            </tr>
        </thead id="tableContent">
        <tbody>
            
        </tbody>
    </table>
    
    <script src="js/bootstrap.bundle.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

</body>
</html>

我的问题是当我按下按钮时，什么也没有发生。按钮本身很好，可以按下等等，但是模态不弹出。我错过了什么或者没有实现什么吗？

css

来源：https://stackoverflow.com/questions/71583015/bootstrap-modal-not-popping-up-when-button-is-pressed

4条答案

按热度按时间

euoag5mw1#

阅读此链接，不要更改 Bootstrap 的版本：https://getbootstrap.com/docs/5.0/components/modal/
从那里，你可以看到你错过了：

<script>
    var myModal = document.getElementById('myModal')
    var myInput = document.getElementById('myInput')

    myModal.addEventListener('shown.bs.modal', function () {
    myInput.focus()
})
</script>

赞(0）回复(0）举报 2023-01-22

w9apscun2#

您正在使用bootstrap 5，因此使用data-bs-toggle代替data-toggle，使用data-bs-target代替data-target

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    Launch demo modal
                </button>

参考：https://getbootstrap.com/docs/5.1/components/modal/

赞(0）回复(0）举报 2023-01-22

hzbexzde3#

修复，实际上你错过了CSS和有按钮属性是错误的：-
下面的例子工作正常...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <title>Student List</title>

</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-8" id="pageName">
                <h1>Student List</h1>

            </div>
            <div class="col-4" id="newButton">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    Launch demo modal
                  </button>

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                ...
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <hr>
    <table class="table">
        <thead class="thead-dark" id="tableHeader">
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Last Name</th>
                <th scope="col">First Name</th>
                <th scope="col">Course</th>
                <th scope="col">Average</th>
            </tr>
        </thead id="tableContent">
        <tbody>

        </tbody>
    </table>

    <script src="js/bootstrap.bundle.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>

</body>

</html>

赞(0）回复(0）举报 2023-01-22

hwazgwia4#

您可以使用jquery来触发modal打开。
$('.newButton button').on('click',function(){ $('#exampleModal').modal('show'); })

赞(0）回复(0）举报 2023-01-22