Bootstrap Modal不显示

Question

我想测试Bootstrap的模态元素并创建一个小测试页面。但没有任何表现，我想知道为什么，任何线索？我从引导页面获得了源代码...我的测试页面位于http://ronhome.no-ip.org/bootstrap/modal.html

Answer 1

您的示例中没有包含jQuery。

Uncaught Error: Bootstrap requires jQuery 

在包含Bootstrap之前必须包含jQuery。

此外，Bootstrap Modal需要通过页面上的某种控件或JavaScript来切换：http://getbootstrap.com/javascript/#modals-usage

这意味着您需要一个具有相应数据属性的按钮，该按钮对应于模态上设置的属性，或者通过javascript执行

通过JavaScript：

$('.modal').modal('show')

或通过控件上的属性：

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

修改： 如果这样做，则需要将目标指定为模态div的ID

<div id="myModal" class="modal fade">
   <!--modal content here -->
</div><!-- /.modal -->

Answer 2

首先你需要包含jquery，并使用按钮触发模态 -

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

或使用jquery显示引导模式 -

<script type="text/javascript">
$(document).ready(function(){
    $('.modal').modal('show');
});
</script>

Answer 3

你需要在Bootstrap之前包含jQuery。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 4

你应该加载你的jQuery javascript文件，before bootstrap javascript文件！
希望它能运作

Answer 5

在我的情况下，当我这样做时，引导模型没有出现

$('#myModal').show();

但是我将上面的代码修改为下面的代码，然后就可以了

$('#myModal').modal('show');

Answer 6

我不知道这是否有用。 我已经尝试了几个小时的很多这些技巧。最后我给模态类添加了bg-dark，它可以工作。

所以我改变了

<div id="myModal" class="modal fade" role="dialog">

成：

<div id="myModal" class="modal fade bg-dark" role="dialog">