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

是否可以使用Twitter引導程序的模塊組件加載頁面片段？我想將頁面加載到模式中，但我只想要一部分。例如，我希望頁面上的表單沒有包裝導航。在使用jQuery工具覆蓋和jquery的.load函數之前，我已經完成了這種類型的工作。但是模態的東西不允許這種類型的信息在傳遞將頁面片段加載到Twitter引導程序模式

這是我工作的一些示例文本：

<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」元素中。但沒有顯示...

如果我切換'metadata.html'頁面只包含'div'內容的頁面，模式顯示。

有沒有人知道爲什麼會發生這種情況？

來源

2012-08-28 pumazi

自舉

使用的jquery負載方法，其允許一個URL和一個片段選擇器來指定：

的.load（）方法，不像$ .get（），允許我們指定要插入的遠程文檔的一部分。這是通過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提取表單元素，並將其顯示在newItemModal模式。這種方法可以讓我重新使用模式的其他項目

來源

2013-02-18 21:07:49 brad

你知道這會降低呢？換句話說，用戶是否有能力點擊鏈接，並在JavaScript的這部分不能正確加載的情況下被帶到目的地？ – pumazi

是的，它可以，但它取決於具體的值和你的服務器如何理解url的。如果我'在新窗口中打開鏈接'，我的瀏覽器將使用完整的href作爲路徑。所以會出現（對我的服務器）一個查詢字符串參數'editMode .container表單'。如果服務器知道在editMode後面的空格處截斷，則一切正常。但如果沒有問號，那麼整個字符串將被服務器視爲網址，通常不會工作。 – brad

可以這樣解決：'' –

可以手工進行：

<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-17 11:47:12 duanemck

聲明使用片段ID數據的遠程工作對我來說：

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

來源

2014-08-24 02:31:46 Theo

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

回答

相關問題