2

私はモーダルを実装するためにtwitterブートストラップjsを使用しています.....オンラインの例を使用しました..... html、CSS、およびjsコードをフィドルにコピーしました....しかし、出力が表示されません.. ..

http://jsfiddle.net/nJ6Mw/

<div class="modal hide fade">
  <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>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>
4

1 に答える 1

2

モーダルを開始するための何かが欠けています。data-targetリンクを追加して、属性で参照されているモーダル ID で開くか、hrefターゲットをモーダル div に設定できます。

<a  role="button" class="btn" data-toggle="modal" data-target="#myModal">Launch demo modal</a>

JavaScript を使用して Modal div をモーダル ターゲットとしてセットアップし、それを開いたり閉じたりすることもできます。

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
...
$('#myModal').modal(options)  <-- check the bootstrap site for possible options values.
$('#myModal').modal('show')
$('#myModal').modal('hide')

これを機能させるために、myModal の id をモーダル div に追加しました。

<div id="myModal" class="modal hide fade">

これはすべて、Bootstrap のドキュメントのとおりです。じっくり観察してみてはいかがでしょうか？

これがあなたの例の実用的なフィドルです。ブーストラップのものを外部リソースとして追加しました。http://jsfiddle.net/nJ6Mw/4/

編集：

属性を追加するdata-dismiss="modal"と、閉じるボタンが機能します。 

<a href="#" class="btn" data-dismiss="modal">Close</a>
于 2013-02-27T00:17:17.240 に答える