我输入了这段代码,但没有任何内容出现:
<div class="modal fade" id="showModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sign me up!</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
模态不会自行显示......需要调用它们。在某些Javascript代码中,您需要实现以下内容:
$("#showModal").modal("show");
这会让它显现出来。例如,在就绪函数中:
$(document).ready(function(){
$("#showModal").modal("show");
});
或者在事件调用的函数中:
function showModal(){
$("#showModal").modal("show");
}
然后有一个按钮:
<button onclick="showModal()">Click Me!</button>
如果您需要更多帮助或其他示例,请查看有关模态如何在此处工作的文档:
答案 1 :(得分:0)
您需要一种方法来触发对话框(例如按钮单击),并在实际模态div上调用.modal。('show')方法。
您可以阅读本文以获得更全面的Bootstrap模态概述,以及一些演示示例:Understanding boostrap modals
$('#clickme').click(function(e) {
$('#showModal').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<div class="modal fade" id="showModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sign me up!</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<button id="clickme" class="btn btn-info">Click Me</button>