如何使用jQuery打开Bootstrap模式窗口？
我正在使用Twitter Bootstrap模式窗口功能。 当有人在我的表单上点击提交时，我想通过单击表单中的“提交按钮”来显示模式窗口。
<form id="myform" class="form-wizard">
<h2 class="form-wizard-heading">BootStap Wizzard Form</h2>
<input type="text" value=""/>
<input type="submit"/>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
jQuery的：
$('#myform').on('submit', function(ev) {
$('#my-modal').modal({
show: 'false'
});
var data = $(this).serializeObject();
json_data = JSON.stringify(data);
$("#results").text(json_data);
$(".modal-body").text(json_data);
// $("#results").text(data);
ev.preventDefault();
});
Bootstrap有几个可以在模态上手动调用的函数：
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
您可以在这里看到更多：Bootstrap模态组件
特别是方法部分。
所以你需要改变：
$('#my-modal').modal({
show: 'false'
});
至：
$('#myModal').modal('show');
如果您希望制作自己的自定义弹出窗口，则可以使用另一个社区成员推荐的视频：
https://www.youtube.com/watch?v=zK4nXa84Km4
另外你可以使用通过数据属性
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
在这种特殊情况下，你不需要使用JavaScript。
你可以在这里看到更多：http://getbootstrap.com/2.3.2/javascript.html#modals
大多数时候，当$('#myModal').modal('show'); 不起作用，这是由两次包含jQuery引起的。 包括jQuery 2次使得模块不能工作。
删除其中一个链接以使其重新工作。
此外，一些插件也会导致错误，在这种情况下添加
jQuery.noConflict();
$('#myModal').modal('show');