Bootstrap Modal不显示

Question

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

Answer 1

首先你需要包括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 2

您的示例没有包含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 3

你需要在Bootstrap之前包含jQuery.

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