Bootstrap Modal点击按钮无法弹出问题排查及修复咨询

DevOps 小满

2026-7-29

问题

我编写了一段Bootstrap页面代码如下：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css" integrity="sha384-QYIZto+st3yW+o8+5OHfT6S482Zsvz2WfOzpFSXMF9zqeLcFV0/wlZpMtyFcZALm" crossorigin="anonymous">
        <style>

        </style>
    </head>
    <body>
        <br>
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                </div>

                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Ajax To Do List <a href="" class="pull-right"><i class="fa fa-plus" aria-hidden="true"></i></a></h3>
                        </div>
                        <br>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">Crasasd asdas asdas</li>
                                <li class="list-group-item">Crasasd asdas asdas</li>
                                <li class="list-group-item">Crasasd asdas asdas</li>
                                <li class="list-group-item">Crasasd asdas asdas</li>
                            </ul>
                        </div>
                    </div>
                    <br>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        Launch demo modal
                    </button>
                </div>

                <div class="col-lg-3">
                </div>

                <!-- 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>

        <script
            src="https://code.jquery.com/jquery-3.6.3.min.js"
            integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
            crossorigin="anonymous">
        </script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
    </body>
</html>

页面中Bootstrap样式的列表可正常显示，但点击「Launch demo modal」按钮时，Modal无法弹出，且浏览器控制台未出现任何JS错误。请问问题出在哪里？该如何修复？

问题原因

代码混用了Bootstrap 3和Bootstrap 5的语法：

按钮上的data-toggle、data-target，以及Modal里的data-dismiss是Bootstrap 3的属性
但引入的是Bootstrap 5的CSS和JS文件，Bootstrap 5已废弃这些旧数据属性，改用带bs前缀的data-bs-toggle、data-bs-target、data-bs-dismiss属性
另外，panel、panel-default、pull-right等是Bootstrap 3的类，Bootstrap 5中已移除，不过这部分不影响Modal功能，仅会导致样式异常

修复方案

将所有Bootstrap 3的数据属性替换为Bootstrap 5的带bs前缀的属性：

按钮的data-toggle="modal"改为data-bs-toggle="modal"，data-target="#exampleModal"改为data-bs-target="#exampleModal"
Modal内关闭按钮的data-dismiss="modal"改为data-bs-dismiss="modal"

修复后的完整代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css" integrity="sha384-QYIZto+st3yW+o8+5OHfT6S482Zsvz2WfOzpFSXMF9zqeLcFV0/wlZpMtyFcZALm" crossorigin="anonymous">
        <style>

        </style>
    </head>
    <body>
        <br>
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                </div>

                <div class="col-lg-6">
                    <!-- 注：此处panel类为Bootstrap3语法，Bootstrap5建议替换为card组件 -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Ajax To Do List <a href="" class="pull-right"><i class="fa fa-plus" aria-hidden="true"></i></a></h3>
                        </div>
                        <br>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">Crasasd asdas asdas</li>
                                <li class="list-group-item">Crasasd asdas asdas</li>
                                <li class="list-group-item">Crasasd asdas asdas</li>
                                <li class="list-group-item">Crasasd asdas asdas</li>
                            </ul>
                        </div>
                    </div>
                    <br>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                        Launch demo modal
                    </button>
                </div>

                <div class="col-lg-3">
                </div>

                <!-- 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-bs-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-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script
            src="https://code.jquery.com/jquery-3.6.3.min.js"
            integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
            crossorigin="anonymous">
        </script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
    </body>
</html>

额外建议：若要完全适配Bootstrap5，可将panel相关类替换为Bootstrap5的card组件，pull-right替换为float-end，样式会更符合框架规范。

内容的提问来源于stack exchange，提问作者Pouya Vaghefi