如何打开模态窗口 Bootstrap 通过 jQuery?
我使用模态窗口的功能 Twitter Bootstrap. 当某人以我的形式点击发送按钮时,我想在按一个按钮时显示模态窗口 "submit button" 以形状的。
jQuery:
<form class="form-wizard" id="myform">
<h2 class="form-wizard-heading">BootStap Wizard Form</h2>
<input type="text" value=""/>
<input type="submit"/>
</form>
Modal
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal hide fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button aria-hidden="true" class="btn" data-dismiss="modal">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//;
}/;
没有找到相关结果
已邀请:
15 个回复
石油百科
赞同来自:
更多信息可以在这里找到:
https://getbootstrap.com/docs/ ... odals
特别是,
http://getbootstrap.com/javascript/#modals-methods
".
所以你需要改变:
到:
如果您想制作自己的弹出窗口,这里是另一个社区成员的建议视频:
https://www.youtube.com/watch?v=zK4nXa84Km4
小姐请别说爱
赞同来自:
在这个特殊的情况下,你不需要写 javascript.
你可以在这里看到更多:
http://getbootstrap.com/2.3.2/ ... odals
董宝中
赞同来自:
不起作用,它是由包含引起的 jQuery 两次。 包括 jQuery 2 模块不起作用。
删除其中一个链接,以便再次获得。
此外,某些插件也会在这种情况下引起错误 add
小明明
赞同来自:
.
这是一个例子:
君笑尘
赞同来自:
例如:
莫代尔无法展示。
正确的代码是 :
快网
赞同来自:
我做了
https://www.w3schools.com/code ... J6Y6T
- versions W3Schools.
郭文康
赞同来自:
http://www.w3schools.com/boots ... d%3Dh
确保以所需的顺序排列了库以获得结果:
1 - 第一的 bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js
/换一种说法, jquery.min.js 必须以前调用 bootstrap.min.js/
知食
赞同来自:
知食
赞同来自:
jQuery
而不是标志
$
调用函数时,它会在我的情况下工作,您可以在下面看到。
jQuery.noConflict//;
因为什么时候 jQuery/'#myModal'/.modal/'show'/; 不起作用,它是由它打开两次的事实造成的 jQuery. 包括 jQuery 2 模块不起作用。 在我的情况下,它将解决问题。
接下来,您可以通过此链接
https://coderoad.ru/53697389/
君笑尘
赞同来自:
用标识符打开或关闭模态 myModal.
如果上述不起作用,那么这意味着 bootstrap.js 被其他一些文件重新定义 js.
这是解决这个问题的解决方案
1:- 移动 bootstrap.js 下来覆盖其他文件 js.
2:- 确保订单如下所示
诸葛浮云
赞同来自:
您可以使用它下面的代码运行模态。
小姐请别说爱
赞同来自:
风见雨下
赞同来自:
MyModal1是模态对象标识符
石油百科
赞同来自:
[code]<link href="https://cdnjs.cloudflare.com/a ... ot%3B rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/a ... gt%3B
<button id="modalME" onclick="clicked/this/;">Click me</button>
<!-- Modal -->
<div aria-hidden="true" class="modal" id="modalME">
<div class="modal-dialog">
<div class="modal-header">
<h2>Modal in CSS</h2>
<a aria-hidden="true" class="btn-close" href="#close">×</a> <!--CHANGED TO "#close"-->
</div>
<div class="modal-body">
<p>One modal example here.</p>
</div>
<div class="modal-footer">
<a class="btn" href="#close">Nice!</a> <!--CHANGED TO "#close"-->
</div>
</div>
</div>
</link>
快网
赞同来自:
- 更多细节
https://getbootstrap.com/docs/ ... odal/