引导模式不弹出答案

【问题标题】：Bootstrap Modal Not popping引导模式不弹出
【发布时间】：2016-05-22 16:03:26
【问题描述】：

我目前正在学习 Bootstrap，我只是在我的项目中放置了一段 Modal 组件的代码。但是，在我运行该程序后，我发现它无法正常工作，并且按钮没有按预期响应。所以我只是想知道是否有人可以帮助我解决这个问题？我将不胜感激。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap responsive-design frontend

【解决方案1】：

你忘了 jQuery 只需添加

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

您的代码没有问题： https://jsfiddle.net/jsfiddleakarsh/6o0spz8g/ 启动演示模式

                                                    <!-- Modal -->
                                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                                        <div class="modal-dialog" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                                                </div>
                                                                <div class="modal-body">
                                                                    ...
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                    <button type="button" class="btn btn-primary">Save changes</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

【讨论】：

您的代码运行良好。检查您是否添加了 bootstrap.js、jquery.js 和 css 文件或 cdn 链接。确保 JQuery cdn 链接位于引导链接上方
谢谢 Akarsh，我刚刚将脚本从移到了我的代码底部，它就可以工作了。从这一点来说，我只是想知道你是否知道它为什么会导致这个问题？另外，当我移动代码时，我也尝试移动 CSS 文件，即使它在最后工作，我意识到页面的装饰在闪烁后出现了，这意味着它最初只是一个普通页面，没有任何样式，然后在页面快速闪烁后，样式就出现了。
我不清楚你的问题，无论如何这里有几点：始终将与角度和角度相关的链接或脚本、jquery、bootstrap 和 bootstrap css 保留在 head 部分。最后剩下的脚本或控制器、工厂、指令等的链接。

【解决方案3】：

也许你只是忘了包含 bootstrapjs 和 jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="<your path to js file>bootstrap.js"></script>

【讨论】：

非常感谢 Moein，我刚刚检查了我的代码，发现脚本放在标记中。尽管我不能百分百确定这是由于这个原因，但我相信它可能与我的问题有一些联系，导致模态框没有出现。

【解决方案4】：

Bootstrap 需要 jQuery。如果您为正在使用的任何浏览器打开开发者工具，您会在控制台中看到错误。

将<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 添加到您的html

【讨论】：

谢谢你，John，我尝试将脚本放在我的代码底部，它成功了！