將頁面片段加載到Twitter引導程序模式中

Question

是否可以使用Twitter bootstrap的模態組件加載頁面片段？ 我想將一個頁面加載到模態中，但我只想要它的一部分。 例如，我希望頁面上的表單沒有包裝導航。 在使用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'頁面，則顯示模態。

有誰知道為什么會這樣？

Answer 1

你可以手動完成：

<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>

Answer 2

bootstrap使用jquery load方法，該方法允許指定URL和片段選擇器：

與$ .get（）不同，.load（）方法允許我們指定要插入的遠程文檔的一部分。 這是通過url參數的特殊語法實現的。 如果字符串中包含一個或多個空格字符，則假定第一個空格后面的字符串部分是確定要加載的內容的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中提取form元素並在newItemModal模式中顯示它。 這種方法允許我重新使用模態用於其他項目

Answer 3

使用data-remote聲明片段id對我有用：

<a href="remote.html" data-remote="remote.html #fragment" data-toggle="modal" data-target="#modal">