5

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>

そして単純に、jsファイルを次のように呼び出します

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

上記のコードは、フェード ページのみを示しており、ダイアログは含まれていません。コンソールに上記の 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">​…​&lt;/div>​

私のhtmlで上記のコードを参照してください。なぜ私はこれを手に入れたのですか？

4

2 に答える 2

5

前に 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');
});
于 2013-09-03T01:50:43.377 に答える