Bootstrap 导航杆-切换器错误，当瞄准模态时

23c0lvtd 于 2023-01-15 发布在 Bootstrap

关注(0)|答案(1)|浏览(202)

当我尝试使用导航栏切换器作为按钮来打开一个模态时，我得到了一个错误。模态没有显示，并且在控制台中显示了一个非法调用错误。
我哪里做错了？
尝试使用offcanvas部分从文档中进行跟踪，但将其更改为模态。
使用bootstrap 5.3.0 α -1
错误：

selector-engine.js:41 Uncaught TypeError: Illegal invocation
        at Object.findOne (selector-engine.js:41:44)
        at Ii._showElement (modal.js:181:38)
        at modal.js:118:36
        at p (index.js:226:51)
        at backdrop.js:79:7
        at p (index.js:226:51)
        at HTMLDivElement.a (index.js:247:5)

<!doctype html>
<html lang="en" data-bs-theme="dark">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

    </head>
    <body>
        <div class="container-fluid px-0" style="overflow-y: hidden; height: 100vh;">
            <div class="row gx-0">
                <nav class="col-2 p-0 d-flex flex-column gap-1" id="sidebar">
                    <!-- sidebar header -->
                    <div class="p-3" style="text-align: center; align-items: center;">
                        <h2>
                            header
                        </h2>
                    </div>
                </nav>

                <!-- settings_menu modal -->
                <div class="modal-dialog modal-dialog-centered fade" tabindex="-1" id="settings_menu">
                    <div class="modal-content">
                        <div class="modal-header">
                            header
                        </div>

                        <div class="modal-body">
                            body
                        </div>

                        <div class="modal-footer">
                            footer
                        </div>
                    </div>
                </div>
        
                <nav class="navbar fixed-bottom" id="footer">
                    <div class="container-fluid">
                        <!-- <a class="navbar-brand" href="#">Fixed bottom</a> -->
                        <div class="">
                            <a href="#" class="btn btn-primary" id="add_bot_button" role="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="tooltip">
                                button 1
                            </a>
                        </div>
        
                        <div class="position-absolute bottom-25 start-50 translate-middle-x" id="lockdown_button">
                            <a href="#" class="btn btn-primary" id="lockdown_button" type="button" data-bs-toggle="offcanvas" data-bs-target="#lockdown_sidebar" aria-controls="lockdown_sidebar">
                                button 2
                            </a>

                            <a href="#" class="btn btn-primary" id="create_tgr_button" type="button" data-bs-toggle="offcanvas" data-bs-target="#create_tgr_sidebar" aria-controls="create_tgr_sidebar">
                                button 3
                            </a>
                        </div>

                        <div>
                            <button class="navbar-toggler" type="button" data-bs-toggle="modal" data-bs-target="#settings_menu">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                        </div>
                    </div>
                </nav>
            </div>
        </div>





        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='script/NEW_DISCORD.js') }}"></script>
        <!-- <script type="application/javascript" src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script> -->
    </body>
</html>

twitter-bootstrap

来源：https://stackoverflow.com/questions/75116535/navbar-toggler-error-when-targeting-modal