我正在使用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();
});
10 回答
尝试
使用id myModal打开或关闭模态 .
如果以上操作不起作用,则表示bootstrap.js已被其他一些js文件覆盖 . 这是一个解决方案
1: - 将bootstrap.js移动到底部,以便它将覆盖其他js文件 .
2: - 确保订单如下
此外,您可以使用via data属性
在这种特殊情况下,您不需要使用javascript .
你可以在这里看到更多:http://getbootstrap.com/2.3.2/javascript.html#modals
只需使用
jQuery
选择器调用模态方法(不传递任何参数) .这是一个例子:
您可以使用下面的代码启动模式 .
大多数情况下,
$('#myModal').modal('show');
由于包含jQuery两次而导致't work, it' . 包括jQuery 2次使模态不起作用 .删除其中一个链接以使其再次起作用 .
此外,一些插件也会导致错误,在这种情况下添加
如果使用链接的onclick函数通过jQuery调用模态,则“href”不能为null .
例如:
莫代尔无法展示 . 正确的代码是:
在这里查看完整的解决方案:
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
(换句话说,必须在bootstrap.min.js之前调用jquery.min.js)
Bootstrap有一些可以在模态上手动调用的函数:
你可以在这里看到更多:Bootstrap modal component
具体是methods section .
所以你需要改变:
至:
如果您想制作自己的自定义弹出式窗口,请参阅其他社区成员的推荐视频:
https://www.youtube.com/watch?v=zK4nXa84Km4
以下是文档准备就绪后如何加载引导程序警报 . 这很容易添加
我在W3Schools上做了一个demo .
我尝试了几种失败的方法,但下面对我来说就像一个魅力: