bootstrap-modalはダイアログを表示しません

Question

私はrailsアプリケーションでブートストラップを使用しています。 bootstrap-modalを使ってダイアログボックスを表示しようとしましたが、ダイアログボックスが表示されません。ここに私のビューコードです。

<div id="creative_attachment_popup" class="modal hide fade" role="dialog"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h3>Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>Do you eant to continue../p> 
    </div> 
    <div class="modal-footer"> 
    <a href="#" class="btn">Close</a> 
    <a href="#" class="btn btn-primary">Save changes</a> 
    </div> 
</div> 

そして単に、私は上記のコードだけフェードページが表示され、任意のダイアログが含まれているdosn't

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

としてのjsファイルを呼び出します。上記のjs行をコンソールに入力すると、次のように表示されます。

<div id=​"creative_attachment_popup" class=​"modal hide fade in ui-dialog-content ui-widget-content" role=​"dialog"> <h1 style=​"display:​ block;​" aria-hidden=​"false">​…​</div>​ 

私のhtmlで上記のコードを参照してください。なぜ私はこれを取得していますか？

Answer 1

は、次のことを確認します。

• あなたはjQuery.jsが含まれていましたか？
• bootstrap.jsを含めましたか？ （ブートストラップの前にjQueryを含める必要があります）
• bootstrap.cssを含めましたか？
• ブラウザのJavascriptコンソール（Firebug/Chrome Dev Tool）にアクセスし、エラーがないことを確認します。

私がコピーされ、空白のページにコードを貼り付け、その後、次のヘッドを追加しました：

<link href="bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="bootstrap.js" type="text/javascript"></script> 

は、その後、私はそれにすべてと

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

メダルポップアップ

を走ったし。だから私はあなたがすべてを（または間違って何かを含めることができないかもしれないと思う）。

Answer 2

jQuery.jsを追加してから、bootstrap.jsを追加する必要があります。

また、簡易形式のHTMLをスクリプトとして使用しないでください。文書の準備ができた後（のような<script src=""/>）あなたは<script src=""></script>ようにそれを閉じる必要があります）

<!-- JQuery --> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script> 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 

<!-- BootStrap Link --> 
<link rel="stylesheet" type="text/css" href="/linker/styles/vendor/bootstrap.css"> 
<script type="text/javascript" src="/linker/js/vendor/bootstrap.js"></script> 

あなたは$('#creative_attachment_popup').modal('show');と呼ばれることがありますか？

$(function() { 
    $('#creative_attachment_popup').modal('show'); 
});