Question

我有一个模态弹出窗口，它同时显示页眉和页脚，但不显示正文内容。我知道这可能是多余的，但是大多数解决方案要么是CSS的问题，要么是我没有使用的div类上的“ hide”属性。 Bootstrap和JavaScript都在布局文件上正确链接。这是一个代码段：

HTML

<a class="primary-btn text-uppercase" data-toggle="modal" data-target="#registerForTraining" href="#registerForTraining">Register for Training</a>&nbsp;
                <!-- Modal -->
                <div class="modal fade" id="registerForTraining" tabindex="-1" role="dialog" aria-labelledby="registerForTrainingTitle"
                    aria-hidden="true" data-backdrop="false">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="registerForTrainingLongTitle">Register for Training</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">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>

JS

<script type="text/javascript">$('#registerForTraining').modal('show')</script>

我正在使用Flask，因此，如果我需要在路线中添加任何内容，我也想知道。请帮助我弄清楚我在做什么错。

Answer 1

我认为原因是aria-hidden="true"，请尝试删除该属性或将其设置为false。

 <div class="modal fade" id="registerForTraining" tabindex="-1" role="dialog" aria-labelledby="registerForTrainingTitle"
                    aria-hidden="true" data-backdrop="false">

模态内容未显示

1 个答案: