4

Twitter ブートストラップのモーダル コンポーネントを使用してページ フラグメントを読み込むことは可能ですか? ページをモーダルにロードしたいのですが、そのセクションだけが必要です。たとえば、ラッピング ナビゲーションのないページにフォームが必要です。jquery ツールのオーバーレイと jquery の .load 関数を使用する前に、この種のことを行いました。しかし、モーダルのものは、このタイプの情報を渡すことを許可していません.

ここに私が取り組んでいるいくつかのテキストの例があります:

 <a tabindex="-1"
    href="metadata.html"
    id="metadata-link"
    data-target="#modal"
    data-toggle="modal">Metadata</a>

 <div id="modal" class="modal hide fade in" style="display:none;">
   <div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
   <div class="modal-body"></div>
   <div class="model-footer">footer</div>
 </div>

 <script>
   $(document).ready(function() {
     $('#metadata-link').modal({show:false});
   });
 </script>

「metadata.html」ページは完全な html ドキュメントです。このページのコンテンツは、期待どおり「.modal-body」要素に読み込まれます。しかし、何も表示されません...

「div」コンテンツのみを含むページの「metadata.html」ページを切り替えると、モーダルが表示されます。

なぜこれが起こるのか誰にも分かりますか？

4

3 に答える 3

4

手動で行うことができます：

<script>
$(document).ready(function() {

     $('#metadata-link').click(function(){
       $.ajax(
       {
          url:'url-to-load-page',
          success: function(response){
            //do what ever you want here to extract the part you want
            $('#modal-div-content').html(adapted-response);
            $('#modal').modal('show');
          }
       });
     });
   });
 </script>
于 2012-10-17T11:47:12.840 に答える
3

ブートストラップは、URL とフラグメント セレクターを指定できるようにする jquery ロード メソッドを使用します。

.load() メソッドは、$.get() とは異なり、挿入するリモート ドキュメントの一部を指定できます。これは、url パラメータの特別な構文で実現されます。文字列に 1 つ以上のスペース文字が含まれている場合、最初のスペースに続く文字列の部分は、読み込まれるコンテンツを決定する jQuery セレクターと見なされます。

したがって、私の場合 (ミュージシャンを追加する場合)、次のような通常のリンク タグを使用できます。

<a href="/musicians/new?editMode  .container form" class="btn pull-right newItem" data-toggle="modal" data-target="#newItemModal" ><i class="icon-plus-sign"></i> Add</a>

コンテナ div からフォーム要素を抽出し、newItemModal モーダルに表示します。このアプローチにより、モーダルを他のアイテムに再利用できます

于 2013-02-18T21:07:49.843 に答える
0

data-remote を使用してフラグメント ID を宣言すると、うまくいきました。

<a href="remote.html" data-remote="remote.html #fragment" data-toggle="modal" data-target="#modal">
于 2014-08-24T02:31:46.433 に答える