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> 

しかし、私はこのメソッドの代わりにdata-target=".bs-example-modal-lg"の代わりにjqueryスクリプトを使って同じモーダルdivを開く必要があります。 私は、製品がショッピングカートに置かれた後にモーダルオープンを実行する必要があるため、モーダルを開く別の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>