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>

＆＃39; metadata.html＆＃39;页面是一个完整的HTML文档。此页面的内容将加载到＆＃39; .modal-body＆＃39;元素如预期。但没有显示......

如果我切换＆＃39; metadata.html＆＃39;仅包含＆＃39; div＆＃39;的页面的页面内容，模态显示。

有谁知道为什么会这样？

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参数的语法。如果有一个或多个空格字符包含在字符串中，第一个字符串后面的字符串部分假设space是一个确定内容的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">

将页面片段加载到Twitter引导程序模式中

3 个答案: