如何使用jQuery打开Bootstrap模式窗口？

本文翻译自：How to open a Bootstrap modal window using jQuery?

I'm using Twitter Bootstrap modal window functionality. 我正在使用Twitter Bootstrap模态窗口功能。 When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form. 当有人点击我的表单上的提交时，我想在单击表单中的“提交按钮”时显示模态窗口。

<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: 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();
});

#1楼

参考：https://stackoom.com/question/tJfC/如何使用jQuery打开Bootstrap模式窗口

#2楼

Bootstrap has a few functions that can be called manually on modals: Bootstrap有一些可以在模态上手动调用的函数：

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

You can see more here: Bootstrap modal component 你可以在这里看到更多： Bootstrap模态组件

Specifically the methods section . 特别是方法部分。

So you would need to change: 所以你需要改变：

$('#my-modal').modal({show: 'false'
});

to: 至：

$('#myModal').modal('show');

If you're looking to make a custom popup of your own, here's a suggested video from another community member: 如果您想制作自己的自定义弹出窗口，请参阅其他社区成员的推荐视频：

https://www.youtube.com/watch?v=zK4nXa84Km4 https://www.youtube.com/watch?v=zK4nXa84Km4

#3楼

In addition you can use via data attribute 此外，您可以使用via data属性

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

In this particular case you don't need to write javascript. 在这种特殊情况下，您不需要编写javascript。

You can see more here: http://getbootstrap.com/2.3.2/javascript.html#modals 你可以在这里看到更多： http ： //getbootstrap.com/2.3.2/javascript.html#modals

#4楼

Most often, when $('#myModal').modal('show'); 通常，当$('#myModal').modal('show'); doesn't work, it's caused by having included jQuery twice. 不起作用，这是因为包含了jQuery两次。 Including jQuery 2 times makes modals not to work. 包括jQuery 2次使模态不起作用。

Remove one of the links to make it work again. 删除其中一个链接以使其再次起作用。

Furthermore, some plugins cause errors too, in this case add 此外，一些插件也会导致错误，在这种情况下添加

jQuery.noConflict();
$('#myModal').modal('show');

#5楼

Just call the modal method(without passing any parameters) using jQuery selector. 只需使用jQuery选择器调用模态方法（不传递任何参数）。

Here is example: 这是一个例子：

$('#modal').modal();

#6楼

If you use links's onclick function to call a modal by jQuery, the "href" can't be null. 如果使用链接的onclick函数通过jQuery调用模态，则“href”不能为null。

For example: 例如：

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">function openModal(){$('#myModal').modal();
}
</script>

The Modal can't show. 莫代尔无法展示。 The right code is : 正确的代码是：

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>

如何使用jQuery打开Bootstrap模式窗口？相关推荐

js java cookie_JS 打开一个模式窗口，使用Cookie传递一个参数
页面A,加载后打开一个模式窗口,设置一个参数,然后自己关闭 function fullScreen(){ loadpopup(); var width = screen.width-10; var h ...
模式窗口window.open造成Session丢失的解决方法
从 HTML 模式或无模式对话框可能没有打开同一进程中 InternetExplorer 窗口中打开,因此模式窗口中调用 window.open()方法打开具体页面,可能造成session 丢失.例如 ...
window.showModalDialog模式窗口无法在子窗口访问解决办法
window.showModalDialog打开的模式窗口无法在子窗口访问如:window.showModalDialog("A.aspx", null, "help: ...
JavaScript弹出模式窗口
解决思路: 一般来说,显示在最前面的窗口都是因为窗口被激活获得焦点,要使窗口永远显示在最前面,可以人为的设置窗口在blur时立刻focus,或者用模式.无模式对话框实现. ...
利用jquery写的从后台获取json数据以表格显示,并带翻页功能.里面包含模式窗口等功能...
利用jquery写的从后台获取json数据,以表格显示,并带翻页功能里面包含模式窗口等功能大家看例子就懂了下面是效果图: http://www.jm47.com/project/3001.asp ...
javascript打开模式窗口的用法
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性. window.showM ...
基于jquery的bootstrap在线文本编辑器插件Summernote （转）
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

如何使用jQuery打开Bootstrap模式窗口？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

如何使用jQuery打开Bootstrap模式窗口？相关推荐

最新文章

热门文章