如何使用jQuery打开Bootstrap模式窗口？
我正在使用Twitter Bootstrap模式窗口function。 当有人在我的表单上点击提交时，我想单击表单中的“提交button”来显示模式窗口。
<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');
如果您想要制作自己的自定义popup式窗口，则可以使用另一个社区成员推荐的video：
另外你可以使用通过数据属性
<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');
只需使用jQueryselect器调用模态方法（不传递任何参数）。
这里是例子：
$('#modal').modal();
如果您使用链接的onclick函数通过jQuery调用模式，则“href”不能为空。
例如：
... ... <a href="" onclick="openModal()">Open a Modal by jQuery</a> ... ... ... ... <script type="text/javascript"> function openModal(){ $('#myModal').modal(); } </script>
莫代尔无法显示。 正确的代码是：
<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
看看这里的完整解决scheme：
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h
确保按需要的顺序放置库以获得结果：
1-第一个bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js
（换句话说，jquery.min.js必须在bootstrap.min.js之前调用）
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> <script src="bootstrap/3.3.7/js/bootstrap.min.js"></script>
文档准备就绪后，如何加载自举警报。 只需添加就很容易
$(document).ready(function(){ $("#myModal").modal(); });
我在W3School上做了一个演示 。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2> <!-- Trigger the modal with a button --> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $("#myModal").modal(); }); </script> </body> </html>
我尝试了几种失败的方法，但下面的工作就像一个魅力：
$('#myModal').appendTo("body").modal('show');
<form id="myform" class="form-wizard"> <h2 class="form-wizard-heading">BootStap Wizzard Form</h2> <input type="text" value=""/> <input type="submit" id="submitButton"/> </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>
您可以使用下面的代码启动模式。
$(document).ready(function(){ $("#submitButton").click(function(){ $("#myModal").modal(); }); });
尝试
$("#myModal").modal("toggle")
用id myModal打开或closures模式。
如果以上不起作用，那么意味着bootstrap.js已被其他js文件覆盖。 这是一个解决scheme
1： – 将bootstrap.js移动到底部，以便覆盖其他js文件。
2： – 确保订单如下
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> <!-- Other js files --> <script src="plugins/jQuery/bootstrap.min.js"></script>
