关于javascript：如何使用jQuery打开Bootstrap模式窗口？


How to open a Bootstrap modal window using jQuery?

我正在使用Twitter引导模式窗口功能。当有人单击我的表单上的提交时，我想在单击表单中的"提交按钮"时显示模式窗口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form
    <input type="text" value=""/>
    <input type="submit"/>
</form>

<!-- Modal -->

   
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header
   
   
        <p>
One fine body…
</p>
   
   
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>

jQuery：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#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
2
3
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

您可以在这里看到更多：引导模式组件

特别是方法部分。

所以你需要改变：

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

到：

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

如果你想自己制作一个自定义弹出窗口，这里有来自其他社区成员的建议视频：

https://www.youtube.com/watch？V= ZK4NXA84KM4

相关讨论

此外，还可以通过数据属性使用

1
<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次会使模态无法工作。

删除其中一个链接以使其再次工作。

此外，一些插件也会导致错误，在这种情况下，添加

1
2
jQuery.noConflict();
$('#myModal').modal('show');
相关讨论

只需使用jQuery选择器调用模式方法(不传递任何参数)。

以下是示例：

1
$('#modal').modal();
相关讨论

如果使用links的onclick函数通过jquery调用模式，"href"不能为空。

例如：

1
2
3
4
5
6
7
8
9
10
... ...
Open a Modal by jQuery
... ...
... ...
<script type="text/javascript">

function openModal(){

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

无法显示模式。正确的代码是：

1
Open a Modal by jQuery

以下是如何在文档准备就绪后加载引导警报。这很简单，只需添加

1
2
3
 $(document).ready(function(){
   $("#myModal").modal();
});

我在W3学校做了一个演示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
  Bootstrap Example
  <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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</head>
<body>


  Here is how to load a bootstrap modal as soon as the document is ready
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
 
   
   
      <!-- Modal content-->
     
       
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
       
       
          <p>
Some text in the modal.
</p>
       
       
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       
     
     
   
 
 



$(document).ready(function(){
   $("#myModal").modal();
});


</body>
</html>

在这里查看完整的解决方案：

http://www.w3schools.com/bootstrap/tryit.asp？文件名=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之前调用)

1
2
3
4
5
6
    <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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

我尝试了几种失败的方法，但下面的方法对我很有吸引力：

1
$('#myModal').appendTo("body").modal('show');
相关讨论

尝试

1
$("#myModal").modal("toggle")

打开或关闭ID为MyModal的模式。

如果上述方法不起作用，则表示bootstrap.js已被其他一些js文件覆盖。这是一个解决方案

1:-将bootstrap.js移到底部，这样它将覆盖其他js文件。

2:-确保订单如下

1
2
3
<script src="plugins/jQuery/jquery-2.2.3.min.js">
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js">

尝试在调用函数时使用jquery而不是$sign，它在我的案例中起到了作用，如下所示。

1
2
jQuery.noConflict();
jQuery('#myModal').modal('show');

jquery.noconflict()；因为当jquery("35; mymodal").modal("show")不起作用时，它是由两次包含jquery引起的。包括jquery 2次会使模态无法工作。在这种情况下，它可以解决问题，就像在我的情况下，它是重复的。

进一步，您可以转到此链接

通过jquery调用时未显示引导模型窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form
    <input type="text" value=""/>
    <input type="submit" id="submitButton"/>
</form>

<!-- Modal -->

   
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header
   
   
        <p>
One fine body…
</p>
   
   
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>

您可以使用下面的代码启动模式。

1
2
3
4
5
$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});