【问题标题】:Modal body content not displayed模态正文内容不显示
【发布时间】:2019-03-19 07:48:11
【问题描述】:

我有一个显示页眉和页脚但不显示正文内容的模式弹出窗口。 我知道这可能是多余的,但大多数解决方案要么是 css 问题,要么是在我没有使用过的 div 类上使用“隐藏”属性。 Bootstrap 和 JavaScript 都在布局文件上正确链接。 这是一个代码sn-p:

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,因此如果我需要在我的路线中添加任何我想知道的东西。 请帮我弄清楚我做错了什么。

【问题讨论】:

  • 提供codepen或jsfiddle
  • 这是链接,但在小提琴上显示的内容很有趣。 jsfiddle.net/7p30w8qg@AdamOrlov
  • 您是否尝试从 a 中删除 href ?可以加一个完整的(包括导入的js文件)例子吗?
  • href 不会影响任何东西。关于文件,我不确定我能做到这一点。 @MatteoGaggiano

标签: javascript html flask bootstrap-modal


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-27
    相关资源
    最近更新 更多