我正在使用Twitter Bootstrap模态窗口功能。当有人单击我的表单上的提交时,我想在单击表单中的“提交按钮”时显示模式窗口。
<form id="myform" class="form-wizard"> <h2 class="form-wizard-heading">BootStap Wizard 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');