如何使用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>