使用jquery运行Twitter Bootstrap模式框

Question

我需要Twitter Bootstrap模式中的一些帮助。 例如： 我有一个按钮：

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

，我需要一个启动通过jQuery脚本模式。

$('#myModal').modal(options) 

但在不工作<script></script>标记，脚本线和引导教程编写应：所以我的教程，该脚本线将做的工作中。 任何想法？

因此，它是开放的购物车2.x的店，它与模态它的自我调用的方法完全不工作的脚本

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
    <div class="modal-dialog modal-lg" role="document"> 
    <div class="modal-content"> 
    <h1>This is a text</h1> 
    <button type="button" class="btn btn-default">Default</button> 
    <button type="button" class="btn btn-primary">Primary</button> 
    </div> 
    </div> 
</div> 

使模式完全与这条线开口：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">The test modal box</button> 

但我需要与jquery脚本打开相同的模态div而不是data-target=".bs-example-modal-lg"这种方法。 因为我需要在将产品放到购物车后运行模式打开，然后在另一个打开模式的jquery脚本中使用此脚本。 在Twitter的引导说明它被写

<script> 
    $('#myModal').modal('show') 
</script> 

做的工作，但它是不开放任何东西。那么，有什么想法？

Answer 1

你需要添加id属性到你的模态，并可以使用jQuery代码来显示模态。下面的例子。

$(function() { 
 
    $("#lauchModal").on('click', function() { 
 
\t $('#myModal').modal('show'); 
 
    }); 
 
    $("#lauchModalAnother").on('click', function() { 
 
\t $('#myModal').modal('show'); 
 
    }) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
 
\t <div class="modal-dialog modal-lg" role="document"> 
 
\t <div class="modal-content"> 
 
\t \t <div class="modal-body"> 
 
\t \t <h1>This is a text</h1> 
 
\t \t <button type="button" class="btn btn-default">Default</button> 
 
\t \t <button type="button" class="btn btn-primary">Primary</button> 
 
\t \t </div> 
 
\t </div> 
 
\t </div> 
 
</div> 
 

 
<button id="lauchModal" type="button">Launch modal</button> 
 
<button id="lauchModalAnother" type="button">Launch modal Another</button>