bootstrp实现同一界面多个模态框

https://i.loli.net/2020/01/23/ylCtVo83xQHEYZF.png
https://i.loli.net/2020/01/23/RQqrvCmSDLJfczx.png

        <button class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal_1">图书列表</button>
        <button class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal_2">出版社列表</button>
        <button class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal_3">作者列表</button>
                <!--第一个模态框的ID为myModal-->
        <div class="modal fade" id="myModal_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        <!--模态框标题-->图书列表
                    </h4>
                    </div>
                <div class="modal-body" style=" 550px; margin: 0px auto;">
                    <!-- 添加你的弹窗内容 -->
                    {% for book in book_list %}
                        <li>{{ book.title }}</li>
                    {% endfor %}
                    
                    <!-- 添加你的弹窗内容 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                    data-dismiss="modal">关闭
                </button>
                </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <!--第二个模态框的ID为myModal_2-->
         <div class="modal fade" id="myModal_2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            <!--模态框标题-->出版社列表
                        </h4>
                    </div>
                    <div class="modal-body" style=" 550px; margin: 0px auto;">
                        <!-- 添加你的弹窗内容 -->
                        {% for publish in publish_list %}
                            <li>{{ publish.name }}</li>
                        {% endfor %}

                        <!-- 添加你的弹窗内容 -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                    </button>
                </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!--第三个模态框的ID为myModal_3-->
         <div class="modal fade" id="myModal_3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            <!--模态框标题-->作者列表
                        </h4>
                    </div>
                    <div class="modal-body" style=" 550px; margin: 0px auto;">
                        <!-- 添加你的弹窗内容 -->
                         {% for author in author_list %}
                             <li>{{ author.name }}</li>
                         {% endfor %}
                        <!-- 添加你的弹窗内容 -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                    </button>
                </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->